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前 言 


随 着 HTML5 和 CSS3 规范 的 不 断 发 展 和 成 熟 , 采用 HTML5 和 CSS3 设计 和 开发 的 网 
站 越 来 越 多 ， 无 疑 该 规范 将 会 成 为 未 来 网 站 、 网 页 设计 的 必然 准则 。 这 两 项 技术 标准 决定 
着 未 来 Web 开发 ， 尤 其 是 Web 前 端 开发 的 发 展 方向 。 其 为 Web 开发 领域 带 来 的 重大 改变 
已 经 在 互联 网 上 逐步 展开 ， 尤 其 随 着 大 量 移动 互联 设备 的 应 用 ， 各 大 浏览 器 厂商 针对 新 规 
范 的 主动 更 新 ， 新 的 技术 规范 也 将 在 更 大 领域 内 起 到 重要 的 作用 。 

本 书 主要 讲解 使 用 HTML5、CSS3 和 JavaScript 语言 设计 和 制作 网 页 的 技术 及 方法 。 
全 书 共 分 7 章 ， 由 浅 入 深 地 介绍 HTML5 和 CSS3 规范 及 技术 的 使 用 方法 ， 讲 述 HTML5 
技术 时 ， 在 HTML 基础 规范 的 基础 上 ， 循 序 渐进 地 引入 HTMLS5 的 新 规范 和 新 技术 ， 重 点 
放 在 网 页 设计 和 制作 过 程 中 最 常用 的 部 分 ， 对 CSS3 的 讲解 则 重点 放 在 设计 和 制作 网 页 过 
程 中 提供 的 新 规范 ， 并 通过 示例 引入 当前 网 页 设计 领域 中 流行 的 设计 风格 。 在 介绍 
JavaScript 的 基础 上 ， 结 合 HTMLS5 提供 的 一 些 新 功能 ， 实 现 更 为 广泛 的 交互 应 用 和 特效 。 
最 后 还 引入 了 当前 使 用 非常 广泛 的 基于 HTML5、CSS3 和 JavaScript 的 应 用 框架 Bootstrap， 
为 学 习 者 进一步 接触 当下 流行 的 网 页 设计 和 布局 葛 定 良好 的 基础 。 

在 注重 技术 讲解 和 示范 的 同时 ， 本 书 也 在 很 多 地 方 将 网 页 设计 、Web 应 用 开发 的 相关 
思想 渗透 其 中 ， 更 加 注重 学 生 在 学 习 网 页 设计 相关 技术 的 同时 对 设计 思想 的 培养 。 第 1 章 
通过 一 个 示例 讲述 网 站 开发 的 流程 与 网 站 设计 规划 、 规 范 ， 并 在 第 2 章 和 第 3 章 中 以 该 例 
中 的 网 站 设计 规划 为 蓝本 ， 实 现 网 站 首页 的 设计 与 制作 。 第 4 章 与 第 7 章 的 综合 案例 均 采 
用 目前 主流 网 站 的 设计 风格 进行 设计 与 制作 ， 能 够 正确 引导 学 生 的 设计 思想 。 

采用 知识 点 分 解 示 例 、 综 合 案例 强化 应 用 技能 的 模式 组 织 全 书 内 容 。 全 书 示例 分 为 两 
类 : 一 类 是 数量 较 多 的 颗粒 化 示例 ， 此 类 示例 针对 一 个 或 少数 几 个 知识 点 进行 讲解 ， 便 于 
教师 根据 自己 课程 的 实际 需要 进行 组 合 教 学 ， 也 便于 学 习 者 在 学 习 过 程 中 有 选择 地 进行 自 
学 ; 另 一 类 是 综合 应 用 示例 ， 此 类 示例 通过 实际 应 用 案例 将 相应 章节 的 知识 点 融入 案例 当 
中 ， 既 能 重复 加 强 相应 知识 和 技能 的 训练 效果 ， 也 能 使 学 习 者 获得 综合 应 用 的 能 力 。 

本 书 内 容 丰富 ， 知 识 由 浅 入 深 ， 涉 及 面 宽 ， 颗 粒 化 示例 便于 知识 和 技能 的 组 织 。 主 要 
面向 网 页 设计 初学 者 ， 是 前 端 开发 的 先导 课程 ， 适 合作 为 大 专 院 校 网 页 设计 相关 课程 的 教 
材 ， 也 可 作为 网 页 设计 培训 教材 使 用 。 

本 书 在 编写 过 程 中 得 到 了 陕西 工业 职业 技术 学 院 王 坤 教授 给 予 的 大 力 支持 和 帮助 ， 本 
书 由 原 建 伟 老师 担任 主编 ， 并 负责 全 书 的 编写 ， 在 编写 过 程 中 得 到 了 陕西 工业 职业 技术 学 
院 丁 洁 老师 、 姜 庆 伟 老师 ， 以 及 陕西 科技 大 学 李 韶 杰 老 师 的 帮助 。 编 写 过 程 中 参阅 了 相关 
教材 、 专 业 书 籍 以 及 相关 网 站 ， 在 此 一 并 向 各 位 老师 和 专家 及 参考 书籍 的 编者 表示 感谢 ! 

由 于 受 时 间 、 资 料 、 编 者 水 平 及 其 他 条 件 限 制 ， 书 中 难免 存在 一 些 不 足 之 处 ， 奶 请 同 
行 专家 及 读者 指正 。 我 们 的 邮箱 是 huchenhao@263.net， 电 话 是 010-62796045。 
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第 1 章 ”Web 开发 概述 


1.1 Web 的 基本 概念 


1.1.1 Web 的 历史 


自从 1989 年 CERN(European Organization for Nuclear Research, 欧洲 粒子 物理 研究 所 ， 
通常 简称 CERN) 发 明了 Word Wide Web( 万 维 网 ) 后 ， 尽 管 最 初 他 们 的 目的 是 用 于 全 球 科学 
家 们 交流 工作 文档 ， 但 万 维 网 还 是 以 飞快 的 速度 在 全 世界 流行 开 来 。 随 着 万 维 网 的 不 断 发 
展 ， 超 文本 、 富 文本 、 超 媒体 等 一 系列 新 概念 涌 入 人 们 的 视野 。 超 文本 是 一 种 用 户 接 口 方 
式 ， 用 以 显示 文本 以 及 与 文本 相关 的 内 容 。 超 文本 普遍 以 电子 文档 的 方式 存在 ， 其 中 的 文 
字 包 含 可 以 链接 到 其 他 字段 或 文档 的 超 文 本 链接 ， 人 允许 从 当前 阅读 位 置 直接 切换 到 超 文本 
链接 所 指向 的 文字 。 
基于 Web 的 各 种 应 用 也 越 来 越 多 ， 在 诸多 的 Web 应 用 中 都 离 不 开 一 种 新 的 语言 ， 旧 

HTIML(Hyper Text Markup Language， 超 文本 标记 语言 )。 我 们 日 We 
属于 超 文 本 。 超 文本 链接 是 一 种 全 局 性 的 信息 结构 ， 它 将 文档 中 的 不 同 部 分 通过 关键 字 建 
立 起 链接 ， 使 信息 得 以 用 交互 方式 搜索 到 。 


1. Web 应 用 的 特点 


(1) Web 应 用 具有 易 用 性 

Web 应 用 提供 图 形 化 的 用 户 操作 页 面 和 易于 使 用 的 导航 功能 ， 提 高 了 用 户 的 使 用 体 
验 。 用 户 只 需要 从 一 个 链接 跳 到 另 一 个 链接 , 就 可 以 在 各 个 页 面 或 各 站 点 之 间 进 行 浏 览 了 。 
这 是 Web 应 用 被 用 户 认可 的 一 个 重要 原因 。 

(2) Web 应 用 具有 内 容 丰 富 性 

Web 应 用 在 HTML 和 CSS 的 支持 下 能 够 将 多 种 表达 元 素 (文本 、 图 形 甚至 音频 和 视频 ) 
组 合 在 页 面 上 ， 与 这 之 前 的 Intemet 以 文本 信息 为 主 的 应 用 比较 而 言 ， 内 容 丰富 多 彩 ， 更 
加 受到 用 户 的 青睐 。 
(3) Web 应 用 具有 良好 的 交互 性 与 动态 性 
由 于 超 链 接 的 出 现 ， 提 高 了 Web 应 用 的 交互 性 ， 用 户 的 浏览 顺序 和 所 到 站 点 完全 由 
自己 决定 。 用 户 通过 表单 (Form) 的 形式 可 以 从 服务 器 获得 动态 的 信息 ， 同 样 用户 也 可 以 通 
过 填写 表单 向 服务 器 提交 请 求 ， 服 务 器 可 以 根据 用 户 的 请 求 返回 相应 信息 。 通 过 这 种 交互 
方式 也 使 得 Web 应 用 具有 动态 的 特点 。 信 息 的 提供 者 可 以 经 常 对 网 站 上 的 信息 进行 更 新 。 
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(4) Web 应 用 与 平台 无 关 

Web 应 用 的 产生 降低 了 应 用 对 系统 平台 的 依赖 性 ， 尤 其 在 用 户 端 ， 无 论 从 Windows 
平台 、Unix 平台 、Macintosh 还 是 别 的 什么 平台 ， 用 户 都 可 以 访问 WWW 上 的 各 种 应 用 。 
用 户 只 需要 使 用 浏览 器 就 能 使 用 各 种 应 用 ， 也 不 用 关心 应 用 到 底 运 行 在 怎样 的 平台 下 。 

(5) Web 应 用 的 分 布 性 

Intemet 的 分 布 性 质 决定 了 Web 应 用 具有 的 分 布 特点 。 对 于 Web 应 用 来 说 ,应 用 所 使 
用 的 数据 资源 、 多 媒体 资源 很 有 可 能 分 布 在 整个 互联 网 的 不 同 地方 。 因此 , 对 于 Web 应 用 
来 说 没 必要 把 所 有 信息 都 放 在 一 起 ， 信 息 可 以 放 在 不 同 的 站 点 上 ， 只 需要 在 浏览 器 中 指明 
这 个 站 点 就 可 以 了 。 通 过 让 物理 上 未 必 在 一 个 站 点 的 信息 在 逻辑 上 一 体 化 ， 使 得 在 用 户 看 
来 这 些 信息 是 一 体 的 。 

2. Web 应 用 的 发 展 


Web 应 用 的 发 展 经 过 几 个 阶段 ，Web 1.0 时 代 开 始 于 1994 年 , 通过 浏览 器 用 户 可 以 浏 
览 各 种 网 站 ,这些 网 站 基本 采用 静态 的 HTML 网 页 组 成 ,基本 上 没有 什么 交互 功能 , 信息 
的 传递 为 单 向 模式 ， 但 是 超 链 接 的 存在 已 经 开始 改变 人 们 获得 信息 的 模式 。 在 这 个 阶段 ， 
人 们 对 信息 的 获取 以 聚合 、 联 合 、 搜 索 为 主 。 

Web 2.0 的 概念 首先 出 现在 2004 年 ， 在 这 个 概念 中 ， 软 件 被 当成 一 种 服务 ，Intemet 
从 一 系列 网 站 演化 成 一 个 成 熟 的 、 为 最 终 用 户 提供 网 络 应 用 的 服务 平台 , 强调 用 户 的 参与 、 
在 线 的 网 络 协作 、 数 据 存储 的 网 络 化 、 社 会 关系 网 络 、RSS 应 用 以 及 文件 的 共享 等 成 为 
Web 2.0 发 展 的 主要 支撑 和 表现 。Web 2.0 的 核心 不 是 技术 ， 而 在 于 指导 思想 。Web 2.0 更 
加 注重 交互 性 ， 这 种 交互 不 仅仅 是 用 户 与 应 用 之 间 的 交互 ， 也 包括 网 站 之 间 、 应 用 之 间 的 
交互 。 在 Web 2.0 时 代 ， 网 站 设计 出 现 了 标准 化 的 概念 。Web 标准 中 典型 的 应 用 模式 是 
“CSS+XHTML”， 据 弃 了 HTML 4.0 中 的 表格 定位 方式 ， 其 优点 是 网 站 设计 代码 不 仅 规 
范 ， 而 且 减 少 了 大 量 代 码 ， 避 免 了 网 络 带宽 资源 的 浪费 ， 加 快 了 网 站 的 访问 速度 。 更 重要 
的 一 点 是 ， 符 合 Web 标准 的 网 站 对 于 用 户 和 搜索 引擎 更 加 友好 。 

Web 3.0 是 Web 2.0 的 进一步 发 展 和 延伸。Web 3.0 在 Web 2.0 的 基础 上 ， 对 杂乱 的 微 
内 容 进行 最 小 单位 的 继续 拆 分 ， 同 时 进行 词义 标准 化 、 结 构 化 ， 实 现 了 微 信 息 之 间 的 互动 
和 微 内 容 之 间 基于 语义 的 链接 。Web 3.0 能 够 进一步 深度 挖掘 信息 并 使 其 直接 从 底层 数据 
库 进 行 互通 ， 并 把 散布 在 Intemet 上 的 各 种 信息 点 以 及 用 户 的 需求 点 聚合 和 对 接 起 来 ， 通 
过 在 网 页 上 添加 元 数据 ， 使 机 器 能 够 理解 网 页 内 容 ， 从 而 提供 基于 语义 的 检索 与 匹配 ， 使 
用 户 的 检索 更 加 个 性 化 、 精 准 化 和 智能 化 。Web 3.0 的 定义 是 : 网 站 内 的 信息 可 以 直接 和 
其 他 网 站 上 的 相关 信息 进行 交互 ， 能 通过 第 三 方 信息 平台 同时 对 多 家 网 站 的 信息 进行 整合 
使 用 ;用 户 在 Intemet 上 拥有 直接 的 数据 ， 并 且 能 在 不 同 网 站 上 使 用 ， 完 全 基于 Web， 用 
浏览 器 就 可 以 实现 复杂 的 系统 程序 才 具 有 的 功能 。Web 3.0 浏览 器 会 把 网 络 当成 可 以 满足 
任何 查询 需求 的 大 型 信息 库 。 
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1.1.2 ”Web 前 端 与 后 台 的 关系 


自从 Web 应 用 大 量 存在 之 后 ， 通 过 浏览 器 页 面 实现 对 信息 的 查询 与 检索 便 成 为 
Intemnet 的 主流 应 用 ， 在 很 长 一 段 时 间 里 ， 基 于 B/S 模式 的 Web 应 用 几乎 成 为 软件 开发 的 
主流 。 在 这 种 模式 下 ， 几 乎 全 部 的 业务 功能 都 要 依靠 服务 器 端的 应 用 程序 来 实现 ， 因 此 也 
被 称 为 后 台 开 发 ， 目 前 主流 的 后 台 开发 平台 有 JEE、ASPNET、PHP 以 及 Python 等 。 在 
这 种 模式 下 ， 开 发 人 员 关 注 在 服务 器 端 如 何 实现 各 种 业务 功能 ， 设 计 人 员 则 主要 通过 页 面 
设计 对 用 户 使 用 的 界面 进行 各 种 优化 。 

随 着 人 们 对 Web 应 用 要 求 的 不 断 提高 ， 尤 其 是 用 户 交互 的 方便 性 ， 以 及 更 多 的 用 户 
使 用 移动 终端 设备 (各 类 平板 电脑 或 智能 手机 ) 访 问 网 站 ， 人 们 对 客户 端 界 面 的 用 户 体验 提 
出 了 更 多 的 要 求 ， 在 富 客户 端 技术 不 断 发 展 与 提高 的 同时 ， 催 生 了 Web 前 端 应 用 。 

Web 前 端 应 用 的 特点 : 

(1) 功能 转移 

Web 前 端 开发 的 一 项 重要 作用 是 将 Web 服务 器 端的 一 部 分 功能 转移 到 浏览 器 端 进行 ， 
从 而 减少 应 用 对 服务 器 的 压力 ， 这 部 分 功能 主要 是 在 浏览 器 端 进行 各 种 验证 操作 ， 对 数据 
信息 的 格式 化 显示 以 及 与 服务 器 端 进行 异步 通信 实现 更 好 的 交互 体验 。 

(2) 对 浏览 器 产生 依赖 

由 于 Web 前 端 应 用 运行 在 浏览 器 端 ， 因 此 对 浏览 器 具有 一 定 的 依赖 性 ， 在 HTML5、 
CSS3 以 及 JavaScript 发 展 的 过 程 中 , 不 同 的 浏览 器 对 其 支持 存在 差别 ， 这 给 开发 人 员 带 来 
了 一 定 的 麻烦 。 随 着 相关 技术 的 不 断 成 熟 ， 以 及 市 场 的 洗礼 ， 相 信和 在 未 来 这 些 问题 将 不 会 
是 主要 矛盾 。 对 浏览 器 依赖 的 另 一 个 原因 是 浏览 器 的 安全 设置 ， 浏 览 器 对 脚本 的 执行 都 有 
安全 设置 ， 可 以 限制 脚本 程序 的 执行 。 因 此 ， 如 果 为 浏览 器 设置 了 限制 执行 脚本 ，Web 前 
端的 很 多 功能 将 因此 不 能 执行 。 

(3) Web 前 端 框架 的 发 展 如 火 如 茶 

Web 前 端 在 发 展 过 程 中 ， 为 了 便于 用 户 设计 和 使 用 ， 发 展 出 来 越 来 越 多 的 开发 框架 。 
这 些 框架 都 在 HTML5、CSS3 和 JavaScript 的 基础 上 设计 和 开发 ， 部 分 框架 完全 基于 
JavaScript， 这 使 得 开发 人 员 有 着 越 来 越 多 的 工具 可 以 选择 。 

尽管 Web 前 端 还 在 发 展 过 程 中 ， 但 越 来 越 多 的 应 用 都 开始 加 入 Web 前 端的 设计 ， 随 
着 相关 技术 的 不 断 成 熟 ，Web 前 端 开发 也 趋 于 成 熟 。 另 一 方面 ， 目 前 市 场 对 Web 前 端 开 
发 的 追捧 也 为 就 业 提供 了 很 大 的 缺口 ， 说 明 市 场 对 技术 的 认可 。 


1.1.3 ”移动 端 应 用 介绍 





























随 着 移动 互联 网 的 不 断 发 展 , 越 来 越 多 的 人 使 用 移动 终端 (各 类 平板 电脑 或 智能 手机 等 
设备 ) 访 问 网 站 ， 使 用 各 种 应 用 ， 原 有 针对 PC 端的 各 种 网 站 和 应 用 出 现 各 种 “水 土 不 服 ” 
的 现象 。 随 着 人 们 对 移动 应 用 需求 的 增长 ， 除 了 各 种 基于 移动 操作 系统 的 App 之 外 ， 很 多 
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网 站 都 推出 了 针对 移动 终端 的 版 本 ,甚至 有 些 App 本 质 上 就 是 一 个 重新 封装 的 浏览 器 , 通 
过 该 浏览 器 访问 相应 的 网 站 。 

移动 应 用 的 特点 : 

(1) 终端 屏幕 多 样 化 

由 于 移动 终端 设备 种 类 多 ， 导 致 屏幕 大 小 与 分 辩 率 差别 非常 大 ， 因 此 要 求 各 种 应 用 与 
网 站 能 够 很 好 地 适应 各 种 不 同 尺寸 与 分 辨 率 , 原 有 针对 PC 端的 Web 应 用 和 网 站 都 不 能 够 
适应 。 

(2) 使 用 习惯 、 场 景 与 PC 端 存 在 较 大 差别 

由 于 PC 设备 与 移动 设备 在 操作 设备 上 存在 差异 ， 因 此 导致 用 户 的 操作 习惯 也 有 所 不 
同 ， 这 就 影响 着 用 户 交 互 界面 的 形式 。 手 机 端 显示 区 域 有 限 ， 因 此 需要 在 有 限 的 区 域内 更 
有 效 地 显示 主要 功能 ， 手 机 界面 也 会 更 加 简洁 ， 每 个 页 面 上 显示 的 元 素 也 要 更 加 精准 。 

使 用 场景 的 差异 也 影响 交互 界面 设计 的 方式 和 重点 。 例 如 以 订餐 网 站 的 Web 端 与 手 
机 端的 定位 为 例 ，PC 端的 Web 应 用 除了 具备 订餐 的 主要 功能 之 外 ， 更 侧重 于 用 户 对 餐 品 
的 展示 与 点 评 ， 而 在 手机 端 ， 则 需要 给 用 户 提供 找到 周围 餐馆 的 更 便捷 方式 。 





























1.2 网 站 设计 与 开发 


1.2.1 网 站 设计 与 开发 的 基本 流程 


自从 万 维 网 走 入 人 们 的 生活 后 ,通过 使 用 浏览 器 对 网 站 进行 访问 获取 信息 成 为 人 们 使 
用 互联 网 的 一 项 主要 活动 ， 各 种 各 样 的 网 站 也 不 断 涌现 ， 在 20 世纪 90 年 代 中 后 期 ， 网 站 
的 数量 几乎 爆发 式 增长 。 

1. 什么 是 网 站 

网 站 在 本 质 上 是 互联 网 上 一 组 特定 信息 的 组 合 ， 这 些 信 息 以 基于 HTML 的 网 页 的 
形式 表现 出 来 。 网 站 其 实 也 是 一 种 通信 工具 ， 用 于 人 们 的 信息 发 布 和 收集 。 网 站 是 由 若 
干 网 页 按照 一 定 组 织 形式 形成 的 ， 因 此 网 页 是 网 站 的 基本 组 成 元 素 ， 用 于 承载 各 种 网 站 
应 用 。 

2. 网 页 的 构成 


网 页 是 用 HTML 编写 的 文件 ， 通 过 将 文字 、 图 像 、 多 媒体 信息 甚至 程序 组 合 在 一 起 ， 
形成 一 种 富 媒体 页 面 。 在 网 页 中 最 主要 的 元 素 是 文字 和 图 像 ， 目 前 绝 大 多 数 页 面 中 文字 和 
图 片 占据 页 面 的 大 部 分 区 域 。 虽 然 网 页 是 用 HTML 写成 的 ， 一 般 扩展 名 为 html， 但 在 服 
务 器 端 运 行 的 页 面 也 可 能 包含 一 些 其 他 语言 ， 用 户 在 浏览 器 端 浏览 的 时 候 还 是 以 HIML 
为 主 。 
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3. 网 页 的 分 类 


根据 网 页 构成 语言 的 不 同 ， 网 页 的 扩展 名 可 能 是 .asp、.php、.jsp 等 ， 通 常 这 些 网 页 也 
被 称 为 动态 网 页 。 这 些 页 面 含有 脚本 程序 ， 需 要 在 服务 器 端 运行 ， 只 有 在 运行 的 时 候 才 能 
看 到 页 面 效果 ， 而 完全 基于 HIML 的 页 面 则 称 为 静态 页 面 。 

4. 网 站 开发 的 基本 流程 


网 站 开发 结合 了 软件 开发 与 平面 设计 的 一 些 规范 和 方法 ， 但 又 有 一 些 自己 的 特点 。 总 
体 来 说 ， 可 以 根据 网 站 的 规模 和 需求 按照 以 下 步骤 进行 : 

(1) 需求 分 析 

在 进行 网 站 开发 之 前 ， 需 要 对 网 站 需求 进行 相应 的 分 析 ， 目 的 在 于 明确 用 户 对 网 站 的 
功能 需求 ， 便 于 在 开发 过 程 中 不 会 偏离 用 户 的 要 求 。 

(2) 域名 与 服务 器 空间 的 申请 

网 站 是 要 在 互联 网 上 展示 给 用 户 的 信息 载体 ， 因 此 需要 将 其 发 布 在 互联 网 上 ， 这 就 需 
要 存放 网 站 的 服务 器 以 及 用 于 访问 网 站 的 地 址 信息 ， 即 域名 。 服 务 器 空间 的 大 小 、 服 务 器 
类 型 都 需要 根据 需求 分 析 时 在 对 网 站 规模 分 析 的 基础 上 确定 ， 对 于 一 些 动态 类 型 的 网 站 ， 
服务 器 空间 一 定 要 有 足够 的 余 量 ， 这 样 才能 保证 在 运行 一 段 时 间 后 ， 避 免 出 现 空间 不 足 的 
情况 。 可 以 通过 自行 购买 硬件 并 搭建 相应 服务 器 后 连 入 互联 网 获得 服务 器 空间 ， 也 可 以 购 
买 服务 器 提供 商 提 供 的 不 同类 型 的 服务 器 空间 。 

域名 是 网 站 的 另 一 个 重要 元 素 ， 是 在 互联 网 上 访问 网 站 的 地 址 信息 ， 互 联网 上 的 用 户 
通过 域名 可 以 很 方便 地 连接 到 网 站 ， 因 此 在 互联 网 上 运行 的 网 站 都 有 一 个 方便 记忆 的 域 
名 , 例如 亚马逊 中 国 的 域名 (z.cn) 就 非常 简单 且 便于 记忆 。 域名 的 申请 和 购买 也 有 相关 的 流 
程 ， 一 般 可 以 向 域名 服务 商 申 请 和 购买 。 

(3) 界面 设计 

网 站 的 设计 既 不 同 于 单纯 的 软件 开发 ， 也 不 同 于 单纯 的 平面 设计 ， 这 是 由 网 站 的 组 成 
形式 决定 的 。 网 站 一 般 由 首页 和 其 他 不 同 分 类 的 几 组 页 面 组 成 。 所 有 页 面 在 设计 风格 上 一 
般 统 一 设 定 ， 首 页 与 其 他 页 面 之 间 也 存在 一 些 差异 ， 这 样 才能 保证 网 站 设计 风格 的 统一 与 
协调 。 

在 网 站 设计 过 程 中 ， 借 鉴 平 面 设计 的 方法 ， 网 站 整体 需要 有 一 个 设计 规范 ， 这 个 规范 
包含 页 面 布局 规范 、 字 体 使 用 规范 、 颜 色 使 用 规范 、 按 钮 和 链接 使 用 规范 等 。 在 设计 页 面 
的 过 程 中 按照 这 些 规范 设计 每 一 个 页 面 ， 以 达到 网 站 风格 整体 划一 的 效果 。 

(4) 数据 库 设 计 与 后 台 设计 和 开发 

目前 的 网 站 基本 没有 纯 静 态 的 网 站 ， 往 往 都 需要 后 台 的 支持 ， 通 过 后 台 组 织 和 发 布 信 
息 ， 因 此 后 台 的 设计 与 开发 是 必 不 可 少 的 环节 。 虽 然 本 书 的 重点 不 在 此 环节 ， 但 对 于 一 个 
完整 的 网 站 ， 学 习 者 必须 了 解 全 部 环节 。 
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后 台 设 计 与 开发 主要 包含 两 部 分 : 数据 库 设计 和 后 台 程 序 设计 。 数 据 库 用 于 存储 发 布 
的 信息 。 后 台 程 序 的 主要 功能 用 于 对 数据 库 操作 ， 按 照 网 站 对 信息 的 组 织 形式 进行 读 取 、 
写 入 或 修改 等 操作 。 

(5) 网 站 测试 与 上 传 

在 网 站 开发 完毕 后 ， 需 要 进行 测试 以 保证 在 将 来 的 实际 生产 环境 下 能 够 正常 和 稳定 
运行 。 测 试 分 为 两 个 阶段 ， 首 先 需要 在 本 地 进行 测试 ， 这 些 测 试 包括 各 种 功能 测试 、 安 
全 测试 等 。 在 本 地 测试 完毕 后 ， 将 网 站 上 传 到 服务 器 ， 进 行进 一 步 的 压力 测试 、 安 全 测 
试 等 。 

(6) 网 站 维护 

上 传 完 的 网 站 在 交付 用 户 使 用 后 ， 进 入 维护 期 。 在 维护 过 程 中 不 断 发 现 和 纠正 程序 中 
存在 的 各 种 bug 以 及 功能 升级 等 。 

5. 网 站 设计 案例 


以 下 通过 班级 网 站 的 设计 介绍 网 站 设计 过 程 中 的 主要 步骤 以 及 所 涉及 的 内 容 , 班级 网 
站 的 首页 完成 后 的 效果 如 图 1.1 所 示 ， 新 闻 页 面 完 成 后 的 效果 如 图 1.2 所 示 。 
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桃李 芬芳 一 工 院 学 子 风采 录 
那 一 抹 属 于 自己 的 美丽 访 国家 励志 奖 ... 上 课 通 知 
助 学 " 铸 人 征文 一 等 奖 寒 ... 缴纳 学 费 通知 











访 赴 台 湾 科 技 大 学 进修 章 超 同学 .,. 期 未 考试 通知 
我 们 的 大 学 希望 的 起 点 一 一 访 仇家 .…. 英 困 补助 申请 通知 


访 赴 台湾 科技 大 学 进修 章 超 同 学 - 


图 1.1 班级 网 站 首页 
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访 赴 台湾 科技 大 学 进修 章 超 同学 

每 一 次 弛 转 回 上 的 瞬间 ， 总 有 那么 一 些 平凡 的 人 努力 着 ， 当 机 会 垂青 时 ， 他 们 
才能 一 飞 趾 天 。 大 家 说 ， 信 息 工程 学 院 网 络 1001 班 的 章 超 就 是 这 样 的 人 。2016 年 
9 月 ， 作 为 我 院 第 一 期 台湾 科技 大 学 进修 项 目 入 选 者 之 一 的 章 超 ， 启 程 赴 台北 开 
始 了 台湾 科技 大 学 的 进修 。 他 们 也 光荣 地 获得 了 学 院 颁 发 的 3000 元 奖学金 。 





























在 送行 会 上 ， 章 超 感 谢 学 院 的 培养 ,更 感谢 母校 为 他 们 搭建 的 深造 学 习 平 台 ， 


并 表示 他 们 一 定 珍惜 学 习 机 会 ， 尽 快 适应 当地 的 生活 和 学 习 环境 ， 克 服 困难 、 努 
力学 习 , 早日 完成 学 业 , 为 母校 争光 。 
章 超 ,平时 生活 中 是 一 个 活泼 开朗 的 大 男孩 ， 在 他 的 身边 总 是 有 那么 一 群 陪 他 
谈心 、 解 间 的 朋友 。 课 余 对 电影 和 外 语 学 习 都 非常 感 兴起， 一 有 空闲 时 间 他 不 是 
在 宿舍 看 电影 ， 就 是 在 图 书馆 读书 。 父 母 常常 对 他 说 ，“ 好 好 学 习 ， 冰 出 属于 自 访 赴 台湾 科技 大 学 进修 章 超 同学 
己 的 一 片 天 地 ! ”， 就 是 这 样 简单 的 话语 却 深 深 烙印 在 他 的 心中 。 他 坚信 ， 努 
力 ， 就 一 定 会 成 功 。 当 章 超 偶然 看 到 我 们 学 院 有 赴 台 湾 进 修 的 项 目 ， 就 真得 抓 住 
了 这 次 机 会 。 在 顺利 通过 了 学 院 组 织 的 几 轮 面试 后 , 成功 入 围 。 











图 1.2 新 闻 页 面 

设计 和 实现 按照 以 下 几 步 进行 : 

1) 需求 分 析 

在 设计 和 制作 网 站 之 前 ， 要 对 用 户 的 需求 进行 深入 分 析 ， 了 解 用 户 的 意图 ， 并 将 用 户 
对 网 站 的 要 求 形成 标准 的 文字 表述 ， 便 于 设计 人 员 明 确 设计 目标 ， 准 确 进行 网 站 的 设计 。 
以 下 是 针对 班级 网 站 进行 的 需求 分 析 : 

(1) 目的 

需求 分 析 的 目的 是 确定 “网 络 17 之 家 ”班级 网 站 的 主要 实现 功能 、 栏 目 设计 以 及 设 
计 要 求 ， 为 做 好 下 一 步 的 工作 提供 指导 。 

(2) 任务 概述 

网 站 定位 : 宣传 类 网 站 

网 站 目标 受众 : 学 生 

(3) 网 站 期 望 达到 的 设计 目标 

通过 班级 网 站 展示 学 校风 景 、 班 级 文化 ， 加 强 同学 们 之 间 的 交流 与 对 班级 的 荣誉 感 。 

(4) 网 站 整体 设计 风格 

考虑 网 站 的 定位 、 主 要 受众 群体 和 设计 目标 ， 网 站 采用 的 设计 风格 是 : 简洁 大 方 ， 活 
泼 阳光 。 























本 HTML5+CSS3 网 页 设计 案例 教程 


(5) 配色 方案 
以 蓝 色 为 主 色 ， 以 白色 为 辅助 色 ， 字 体 采用 宋体 。 
(6) 功能 需求 
@ 主导 航 栏目 划分 
校园 新 闻 ”学 校 简介 | 班级 新 闻 | 通知 通告 | 校园 文化 | 法 规 校 纪 
校园 风光 标志 建筑 | 师 生 剪影 | 实 训 环境 
班级 相册 ”教室 采风 | 寝室 剪影 | 班级 活动 
个 性 展示 “个 人 风采 | 文学 天 地 
留言 互动 平台 | 心灵 有 约 
用 户 登 录 “管理 登录 | 学 生 登录 
后 台 管 理 功能 划分 
此 方案 能 够 为 用 户 提供 浏览 班级 网 站 的 各 种 信息 与 资讯 ， 用 户 在 登录 到 门户 网 站 的 同 
时 ， 即 可 实现 信息 的 发 布 、 维 护 。 
用 户 登 录 : 包括 用 户 注册 、 身 份 验 证 、 个 人 信息 维护 
信息 发 布 /管理 : 添加 、 删 除 和 更 改 信息 ; 管理 员 登 录 
(7) 首页 内 容 和 设计 需求 
主导 航 ( 和 副 导 航 ) 栏 目 在 网 站 首页 上 有 所 体现 ， 在 首页 上 主要 显示 主导 航 。 
对 性 能 的 一 般 性 规定 : 采用 HIML5+CSS+div 布局 ， 符 合 Web 2.0 标准 ， 保 证 网 站 的 
整体 浏览 速度 。 
(8) 技术 要 求 
@ 运行 环境 : 
客户 端 : CPU Intel 3.0 以 上 ， 内 存 512MB 以 上 
服务 器 : CPU Intel 酷 害 17 以上， 内存 4GB 以 上 硬盘 500GB 以 上 
操作 系统 :Windows 7 
浏览 器 类 型 : 正 9.0 以 上 
关系 数据 库 : MySQL 5 
开发 平台 : Photoshop、Flash、Dreamweaver 
@ 使 用 技术 : PHP 
(9) 其 他 需求 
安全 : 系统 应 严格 按照 用 户 不 同 身份 和 权限 划分 ;控制 系统 各 项 功能 的 使 用 者 、 身 份 
和 数据 的 访问 权限 ; 有 效 防止 非法 用 户 的 入 侵 ， 确 保 系 统 的 安全 保密 性 。 
2) 网 站 设计 规范 
(1) Logo 使 用 规范 


网 络 17 之 守 


字体 : 方正 姚 体 
大 小 : 24 点 
颜色 : 深蓝 为 #31285a， 红 色 为 #ff0303 
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(2) 导航 样式 


首页 ”校园 新 闻 ”校园 风光 ”班级 相册 个 性 展现 ”留言 


字体 : 微软 雅 黑 ， 大 小 为 16px， 颜 色 为 本 FF 

导航 区 域 : 长 为 768px， 高 35px， 背 景色 为 #93A8FF 
(3) 文字 

中 文 : 宋体 (默认 )、 微 软 雅 黑 (标题 ) 

英文 : Arial、Helvetica、sans-serif 

标题 : 微软 雅 黑 、18 号 、 加 粗 、 字 体 颜色 为 #666 


访 赴 台湾 科技 大 学 进修 齐 超 同学 








正文 字体 : 宋体 14 号 、20 行距 、 首 行 缩 进 两 个 字符 、 字 体 颜 色 为 #000 


每 一 次 弛 转 回 易 的 明 间 ， 总 有 那么 一 些 平 凡 的 人 努力 着 ， 当 机 会 垂青 时 ， 他 们 
才能 一 飞 中 天 。 大 家 说 ， 信 息 工程 学 院 网 络 170] 班 的 章 超 就 是 这 样 的 人 。2016 年 
9 月 ， 作 为 我 院 第 一 期 台湾 科技 大 学 进修 项 目 入 选 者 之 一 的 章 超 ， 启 程 赴 台 北 开 
始 了 台湾 科技 大 学 的 进修 。 他 们 也 光荣 地 获得 了 学 院 祷 发 的 3000 元 奖学金 。 

在 送行 会 上 ， 章 超 感谢 学 院 的 培养 ， 更 感谢 母校 为 他 们 搭建 的 深造 学 习 平台 ， 
并 表示 他 们 一 定 珍惜 学 习 机 会 ， 尽 快 适 应 当地 的 生活 和 学 习 环境 ， 克 服 困难 、 努 
力学 习 , 早日 完成 学 业 , 为 母校 争光 。 


(4) 颜色 配色 系统 
页 面 要 有 主 色调 ， 页 面 的 颜色 尽量 控制 在 四 种 以 内 ， 不 要 过 于 杂乱 ; 在 设计 前 要 充分 


和 编辑 、 产 品 等 需求 方 沟通 关于 页 面 的 色彩 需求 ， 提 出 专业 建议 ， 整 个 网 站 以 蓝 色 作为 主 
色调 ， 标 准 色 值 如 下 : 


#000066 


#93A8FF 国 
#FF0303 EN 


1.2.2 ”网 站 设计 与 开发 的 主要 技术 








采 / 











网 站 设计 与 开发 准确 来 说 应 该 分 为 两 个 部 分 ， 即 网 站 的 前 端 设计 与 后 台 开 发 。 两 部 分 


不 同 的 技术 , 但 两 者 之 间 不 是 简单 的 分 离 , 而 是 按照 Web 开发 的 标准 进行 一 定 程度 的 


全 


合 ， 实 现 同步 开发 。 


1. Web 前 端 设 计 与 开发 技术 
目前 Web 前 端的 设计 与 开发 主要 采用 基于 HTML5、CSS3 和 JavaScript 的 体系 , 在 这 


个 体系 下 ， 发 展 出 很 多 不 同 的 应 用 方向 。 


< HTML5+CSS3 网 页 设计 案例 教程 


基于 HTML5 和 CSS3 的 体系 产生 与 发 展 ， 完 全 是 由 市 场 发 展 的 需求 决定 的 。 在 这 种 
体系 产生 之 前 ，Web 前 端的 富 客户 端 技术 以 Adobe 的 Flash 为 主 ， 微 软 也 有 自己 的 技术 产 
品 Silverlight。Flash 采用 插件 技术 为 浏览 器 端的 交互 式 应 用 提供 了 一 种 全 新 的 应 用 ， 结 合 
其 在 动画 技术 上 的 应 用 ，Flash 技术 几乎 占领 一 个 时 代 的 Web 前 端 应 用 ， 以 至 于 微软 也 开 
发 了 自己 的 Silverlight 技术 。 但 Flash 腔 肿 的 插件 机 制 和 安全 隐患 ， 以 及 Silverlight 极 低 的 
市 场 占 有 率 ， 都 迫使 市 场 逐渐 放弃 这 些 技术 。 

随 着 HTML5 和 CSS3 的 不 断 成 熟 , 以 及 JavaScript 脚本 语言 的 不 断 标准 化 , 越 来 越 多 
的 应 用 转向 此 平台 。 在 Adobe 宣布 放弃 对 Flash 的 继续 支持 后 , HTML5、CSS3 和 JavaScript 
体系 几乎 是 目前 仅 可 以 选择 的 平台 。 

2. Web 服务 器 端 开发 技术 


Web 服务 器 端 开发 技术 种 类 较 多 ， 根 据 应 用 层面 的 不 同 按照 以 下 内 容 介绍 : 

(1) 数据 库 技术 

目前 在 服务 器 端 常用 的 数据 库 有 MySQL( 或 Maria DB， 它 是 MySQL 源 代码 的 一 个 分 
支 )、SQL Server、SQLite、Oracle、MongoDB 等 。 

(2) 开发 语言 

在 后 台 的 开发 过 程 中 ， 开 发 语言 是 实现 各 种 功能 的 核心 ， 目 前 常用 的 后 台 开 发 语言 
Java Web 平台 、PHP、Python、ASP.NET、Ruby 以 及 Nodejs 等 。 

(3) Web 服务 器 

Web 服务 器 是 指 网 站 服务 器 ， 一 般 运 行 在 Intemet 上 ， 用 于 放置 网 站 文件 ， 向 浏览 器 
等 Web 客户 端 提 供 文 档 ， 提 供给 用 户 进 行 浏览 。 目 前 在 Intemet 上 主流 的 Web 服务 器 有 
Apache、Nginx、IIS、Tomecat 等 。 


1.2.3 网 站 设计 与 开发 的 常用 工具 

在 网 站 设计 和 开发 的 过 程 中 ， 有 很 多 不 同 功能 的 工具 软件 针对 不 同 的 环节 。 在 Web 
前 端 和 服务 器 端 所 使 用 的 软件 存在 一 定 的 差异 。 

1. 设计 工具 























(1) Photoshop 

大 名 易 易 的 Adobe Photoshop 图 像 处 理 软 件 ( 简 称 PS) 在 平面 设计 领域 几乎 成 为 业界 标 
准 ， 同 样 在 网 页 设计 过 程 中 也 发 挥 着 重要 的 作用 。Photoshop 在 网 页 设计 中 主要 用 于 设计 
和 处 理 各 种 图 片 ， 以 及 直接 设计 页 面 并 进行 切 图 。 
(2) Dreamweaver 
同样 来 自 Adobe 公司 的 Dreamweaver 也 在 网 页 设计 领域 成 为 网 页 设计 师 的 常用 工具 。 
Dreamweaver 是 集 网 页 制作 和 网 站 管理 于 一 身 的 所 见 即 所 得 网 页 编辑 器 ， 利 用 它 可 以 轻 而 
易 举 地 制作 出 跨越 平台 限制 和 浏览 器 限制 的 极 具 动感 的 网 页 。 
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2. 开发 工具 


(DIDE 

IDE 是 Integrated Development Environment( 集 成 开发 环境 ) 的 简称 ， 是 用 于 提供 程序 开 
发 环境 的 应 用 程序 ， 一 般 包 括 代码 编辑 器 、 编 译 器 、 调 试 器 和 图 形 用 户 界 面 等 工具 。IDE 
是 集成 了 代码 编写 功能 、 分 析 功 能 、 编 译 功能 、 调 试 功能 等 于 一 体 的 开发 软件 套 。 所 有 有 具 
备 这 一 特性 的 软件 或 软件 套 (组 ) 都 可 以 称 为 集成 开发 环境 ， 如 微软 的 Visual Studio 系列 、 
Borland 的 C++ Builder、Eclipse 等 。 在 目前 的 Web 应 用 开发 中 IDE 使 用 较 多 。 

(2) 代码 编辑 器 

虽然 IDE 有 方便 的 集成 环境 ， 能 够 提供 编辑 、 编 译 、 调 试 于 一 体 的 开发 环境 ， 但 也 因 
此 让 程序 变 得 及 和 肿 。 在 一 些小 规模 的 开发 过 程 中 ， 轻 量 级 的 代码 编辑 器 也 是 用 户 经 常 使 用 
的 工具 。 代码 编辑 器 的 功能 虽然 没有 IDE 完整 , 但 在 设计 和 开发 过 程 中 能 对 编辑 和 修改 代 
码 提供 足够 的 支持 。 常 用 的 代码 编辑 器 有 Notepad++、Visual Studio Code 、Sublime Text 
和 UltraEdit 等 。 

3. 其 他 工具 

(1) 测试 工具 

网 站 设计 和 制作 完成 后 ， 网 站 的 显示 速度 如 何 ? 网 站 页 面 之 间 的 链接 是 否 工 作 正常 ? 
页 面 是 否 能 够 正常 交互 ? 网 站 整体 的 运行 效率 如 何 ? 这 些 问 题 需 要 通过 对 网 站 进行 测试 
才能 解答 ,测试 种 类 较 多 , 例如 : Google 的 Page Speed Online 用 于 页 面 在 线 速度 测试 和 网 
页 性 能 优化 方案 ，Pingdom 提供 服务 器 、 网 络 和 网 页 监测 等 。 

(2) 网 站 发 布 工具 

网 站 或 Web 应 用 设计 开发 一 般 在 本 地 进行 ， 网 站 与 Web 应 用 在 开发 完毕 后 ， 发 布 的 
时 候 需 要 用 工具 将 网 站 文件 传送 到 相应 服务 器 上 ， 较 为 常用 的 方式 有 FTP、SSH 等 。 通 过 
FTP 协议 发 布 和 上 传 网 站 的 工具 主要 是 各 种 FTP 客户 端 工具 ， 如 FlashFXP、CuteFTP、 
BpFTP、LeapFTP 等 。 这 些 FTP 客户 端 软 件 一 般 都 提供 方便 的 图 形 界面 ， 且 支持 目录 (和 
子 目录 ) 的 文件 传输 及 删除 。 

4. Dreamweaver 界面 介绍 

Dreamweaver 是 本 书 要 用 到 的 软件 之 一 ， 它 提供 可 视 化 的 方式 来 进行 网 页 的 设计 与 制 
作 ， 其 界面 如 图 1.3 所 示 。 

Dreamweaver 的 工作 界面 由 几 个 区 域 组 成 , 在 窗口 的 顶部 分 布 着 菜单 栏 和 颜色 图 标 (也 
称快 捷 工具 栏 )， 如 图 1.4 所 示 。 菜 单 栏 提 供 Dreamweaver 的 全 部 功能 ， 每 一 个 菜单 中 还 包 
含 一 些 子 菜单 ;颜色 图 标 将 常用 的 功能 按照 不 同类 型 进行 分 类 ， 以 图 标的 形式 提供 给 用 户 
使 用 









































界面 的 中 间 区 域 由 左 侧 的 “文档 ”窗口 和 右 侧 的 “实时 ”视图 组 成 ， “文档 ”窗口 的 
上 方 是 “工作 区 切换 ”工具 条 ， 如 图 1.5 所 示 。“ 文 档 ” 窗 口 主 要 用 于 显示 当前 文件 的 代 
码 ，“ 实 时 ”视图 是 网 页 设计 和 制作 的 主要 区 域 ， 在 这 个 区 域 可 以 非常 方便 地 编辑 页 面 中 
的 各 种 元 素 。“ 工 作 区 切换 ”工具 条 的 几 个 按钮 可 以 切换 视图 。 
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图 1.3 Dreamweaver 界面 
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图 1.4 菜单 栏 和 颜色 图 标 
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html> 

2 <html> 
3 <head> 
a" <meta 
charset= 
“ute=0"» 
<title> 无 
标题 文档 </ 
title> 
</head> 
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<body 十 
</body> 
</html> 


卢 口 中 中 








[9] 西 芭 [1100 -| 下 男 夯 555x407-1K71I 秘 Unicode (UTF-8) 
1.5 “文档 ”窗口 和 “实时 ”视图 
“属性 ”面板 用 于 设置 网 页 中 元 素 的 相关 属性 ， 如 图 1.6 所 示 。 在 Dreamweaver 中 ， 
页 面 上 的 元 素 类 似 于 对 象 ， 每 一 个 元 素 都 有 相应 的 属性 ， 通 过 “属性 ”面板 可 以 根据 需要 
设置 元 素 的 特性 ， 如 字体 类 型 、 颜 色 或 大 小 等 。 
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Dreamweaver 工作 界面 的 右 侧 为 其 他 面板 区 域 ， 此 区 域 由 多 个 窗口 组 成 ， 如 图 1.7 所 
示 ， 主 要 用 于 管理 AP Div 元 素 、CSS 样式 、 文 件 和 资源 等 。 
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5. Sublime Text 简介 


Sublime Text( 界 面 如 图 1.8 所 示 ) 是 目前 非常 流行 的 代码 编辑 器 ， 虽 然 不 具有 
Dreamweaver 的 可 视 化 设计 功能 ， 没 有 IDE 集成 环境 的 全 面 功能 ， 但 依然 提供 非常 完善 的 
代码 编辑 功能 。Sublime Text 是 收费 软件 ， 但 可 以 无 限期 试用 。 

Sublime Text 与 大 多 数 编辑 器 一 样 具有 拼写 检查 、 书 签 、 多 窗口 管理 、 多 选择 、 代 码 
段 提示 、 自 定义 功能 键 、 自 定义 菜单 和 工具 栏 等 功能 ， 还 提供 代码 缩 略图 、Python 插件 等 
特色 功能 。 


图 untitled - Sublime Text (UNREGISTERED) 

文 /#(P)。 编 名 (E) 选择 (S) 坦 找 () 查看 (V) 转 到 (G) 工具 (T) 项 目 (P) 首选 项 (N) 帮助 (H) 
OPEN FILES untted x 

x untitled a | 








图 1.8 Sublime Text 界面 
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1.3 本 章 小 结 





本 章 主要 介绍 了 Web 开发 的 基本 概念 ， 讲 述 了 Web 应 用 的 发 展 历程 、Web 前 端 与 后 
台 的 关系 以 及 网 站 的 概念 、 组 成 等 ， 通 过 示例 讲解 了 网 站 设计 与 开发 的 基本 流程 ， 并 介绍 
了 网 站 开发 中 的 主要 技术 和 常用 软件 。 


1.4 课 后 训练 

















1. 收集 自己 喜欢 网 站 的 首页 ， 将 其 截图 保存 。 
2. 以 自己 学 校 网 站 的 首页 为 例 分 析 其 结构 和 布局 、 色 彩 方案 以 及 风格 特点 , 写成 分 析 
报告 。 
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2.1 HTMLS 简介 


HTML 是 Hypertext Markup Language( 超 文本 标记 语言 ) 的 简称 ， 是 互联 网 上 用 于 编写 
网 页 的 工具 。 自 从 1993 年 6 月 互联 网 工程 工作 小 组 发 布 草案 开始 ，HTML 就 开始 给 网 络 
世界 带 来 不 断 的 变化 ，1997 年 发 布 的 HTML 4.0 在 很 长 一 段 时 间 里 成 为 互联 网 上 页 面 设计 
和 编写 的 唯一 工具 , 影响 了 Web 世界 的 所 有 应 用 。 随 着 互联 网 技术 的 不 断 发 展 ， 人 们 对 网 
页 浏览 的 体验 要 求 越 来 越 高 ，HTML 4.0 逐渐 暴露 出 一 些 不 足 ， 随 后 一 些 新 的 分 支 (如 
XHTML) 的 出 现 加 剧 了 人 们 对 这 些 缺 点 的 诉 病 ，W3C 组 织 (World Wide Web Consortium， 
万 维 网 联盟 ) 与 WHATWG 工作 组 (Web Hypertext Application Technology Working Group) 合 
作 开 始 了 HTMLS 新 标准 的 制定 。 

HTMLS 新 标准 出 台 后 ， 得 到 很 多 软 硬 件 平台 的 支持 ， 目 前 主流 的 浏览 器 (微软 的 下 
和 Edge 浏览 器 、 谷 歌 的 Chrome 浏览 器 、Apple 的 Safari 浏览 器 以 及 Opera 浏览 器 等 ) 都 对 
HTMLS 的 新 特性 提供 一 定 程度 的 支持 ， 由 于 HIML5 还 在 发 展 ， 因 此 ， 这 些 浏 览 器 在 对 
新 特性 的 兼容 性 上 存在 一 些 差别 。 


2.1.1 HTML5 的 特点 


HIMLS 不 仅 在 原 HIML 4.0 的 基础 上 添加 了 一 些 新 的 标签 ， 而 且 其 新 规则 和 新 特性 
是 建立 在 HTML、CSS、DOM 以 及 JavaScript 之 上 的 综合 应 用 。 一 些 原 来 HITML 4.0 需 
要 插件 来 支持 的 功能 和 应 用 ，HTMLS5 自身 已 经 可 以 实现 对 它们 的 支持 ， 尤 其 画布 (canvas 
元 素 ) 功 能 的 实现 ， 大 大 增强 了 HIMLS 的 绘图 能 力 ， 因 此 ，HTML5 减少 了 对 外 部 插件 的 
需求 ， 比 如 对 Flash 的 支持 。 

HIML5 增强 了 对 多 媒体 的 支持 ， 这 是 HTML 4.0 最 弱 的 环节 ，HTMLS5 通过 video 和 
audio 元 素 实现 对 视频 和 音频 的 良好 支持 。 

HTML5 对 本 地 离线 存储 的 支持 更 好 ,在 很 大 程度 上 提高 了 Web 应 用 客户 端的 安全 性 
和 用 户 体 验 。 
HIML5 新 增加 的 表单 控件 为 用 户 交互 界面 提供 了 更 方便 的 手段 .HTMLS5 另 一 个 受 欢 
迎 的 新 特点 是 其 应 用 独立 于 设备 ， 这 使 开发 出 来 的 基于 HTMLS 的 应 用 可 以 更 广泛 地 适应 
不 同 的 设备 与 屏幕 尺寸 。 


2.1.2 HTML5 文件 结构 






































HIMLS 保持 了 HTML 4.0 文件 结构 的 基本 特征 , 增添 了 一 些 新 的 特性 , 但 比 XHTML 
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和 HTML 4.01 要 简洁 很 多 ， 这 完全 符合 HTML5 的 简洁 设计 思想 。HTML5 的 文档 结构 依 
然 采用 <html>、<head> 和 <body> 这 种 基本 标签 形式 ， 在 <html> 标 签 中 使 用 简洁 的 doctype 
替代 了 HTML 4.01 版 本 中 元 长 复杂 的 定义 以 定义 文档 类 型 ，doctype 只 是 为 了 验证 器 进行 
验证 ， 对 浏览 器 而 言 没 有 影响 ， 浏 览 器 可 以 获得 编写 页 面 所 用 标签 的 版 本 。 





<html> 标 签 告知 浏览 器 这 是 一 个 HTML 文档 。html 元 素 是 HTML 文档 中 最 外 层 的 元 
素 ， 也 可 称 为 根 元 素 。 

<head> 标 签 是 所 有 头 部 元 素 的 容器 ， 在 <head> 标 签 内 部 的 元 素 或 标签 可 以 包含 脚本 、 
指引 浏览 器 找到 样式 表 、 提供 元 信息 , 如 <base>、<link>、<meta>、<script>、<style>、<title> 
等 标签 。 

<meta> 标 签 用 于 提供 有 关 页 面 的 元 信息 (meta-information)， 比 如 针对 搜索 引擎 和 更 新 
频 度 的 描述 和 关键 词 。 在 HIML5 中 对 字符 编码 设置 的 方式 也 简化 了 很 多 , 只 需要 在 <meta> 
标签 中 添加 charset="utf-8" 属 性 即 可 。 

<title> 标 签 用 于 定义 文档 的 标题 。 浏 览 器 会 以 特殊 的 方式 使 用 标题 ， 并 且 通 常 把 它 放 
置 在 浏览 器 窗口 的 标题 栏 或 状态 栏 上 。 同 样 ， 当 把 文档 加 入 用 户 的 链接 列表 、 收 藏 夹 或 书 
签 列表 时 ， 标 题 将 成 为 文档 链接 的 默认 名 称 。 

<body> 标 签 用 于 定义 文档 的 主体 。body 元 素 包含 文档 的 所 有 内 容 ， 比 如 文本 、 超 链接 、 
图 像 、 表 格 、 列 表 等 。 


2.1.3 创建 一 个 标准 的 HTML5 网 页 


在 Dreamweaver CS6 中 新 建文 件 时 ， 默 认 创建 的 文件 不 是 HIML5 页 面 文件 ， 因 此 ， 
在 创建 的 时 候 , 需要 在 “新 建 ” 栏 目 中 选择 “更 多 ...”, 如 图 2.1 所 示 (新 建文 件 时 也 可 以 
打开 “文件 ”菜单 ,选择 “新 建 ” 子 菜单 ， 如 图 2.2 所 示 ), 在 弹出 的 “新 建文 档 ” 窗 口中 ， 
在 “文档 类 型 ”下 拉 列 表 中 选择 “HTML 5” 选 项 , 如 图 2.3 所 示 。 在 单 击 “ 创 建 ”按钮 后 
会 创建 HTMLS5 文件 ， 在 打开 的 “文件 窗口 ”的 右上 部 分 ， 在 “标题 ”后 的 文本 框 内 输入 
“第 一 个 HIMLS 页 面 ”， 在 下 面 的 “设计 窗口 ”中 输入 “这 是 我 的 第 一 个 HTML5 页 面 
实例 。”， 最 终 效果 如 图 2.4 所 示 。 
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图 2.1 开始 界面 
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图 2.4 创建 完成 的 HIMLS 页 面 文件 
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创建 完 HIML5 页 面 文件 后 ， 将 文件 保存 至 文件 夹 中 。 首 先 打 开 “ 文 件 ” 菜 单 ， 选 择 
“保存 ” 子 菜单 ， 如 图 2.2 所 示 。 在 弹出 的 “另存 为 ”对 话 框 中 ， 在 “文件 名 ”后 的 文本 





如 图 2.5 所 示 。 


框 内 输入 文件 名 , 在 保存 位 置 处 选择 存储 文件 的 文件 夹 后 , 单 击 “保存 ”按钮 将 文件 保存 ， 
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2.5 “另存 为 ”对 话 框 


站 点 根 目录 





保存 文件 后 ， 在 工具 条 上 单 击 “在 浏览 器 中 预览 /调试 ”按钮 后 ， 选 择 “ 预 览 在 
IExplore” 选 项 或 直接 按 F12 键 ， 如 图 2. 6 所 示 。 在 浏览 器 中 进行 预览 ， 在 浏览 器 中 的 预 


览 结果 如 图 2.7 所 示 。 
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So <!doctype html> 预览 在 Adobe Browserlab Ctrl+Shift+F12 

2 html> 

BD <head> 编 红 浏览 器 列表 (E).. 

9 <meta charset- 
"utf-8"> 

ye | 
页 面 </title> 

/head> 宇 部 | 当前 

2 | 所 过 内 容 的 搓 要 | 

@ <body> 选 请 过 元 素 ， 

国光 个 未 对 当前 选 定 内 容 应 用 年 何 CSS 局 性 。 请 选择 一 个 带 样式 的 元 素 
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图 2.6 单 击 预览 按钮 
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这 是 我 的 第 一 个 HTML5 页 面 实例 。 








图 2.7 在 浏览 器 中 的 预览 结果 
2.1.4 Dreamweaver CS6 的 使 用 


Dreamweaver CS6 是 网 页 设计 与 网 站 开发 中 最 常用 的 工具 之 一 ， 本 书 的 所 有 示例 均 使 
用 该 软件 完成 。Dreamweaver CS6 是 Adobe 公司 的 软件 ， 可 以 从 互联 网 上 下 载 试用 版 进行 


安装 和 使 用 。 
在 Dreamweaver CS6 中 制作 和 设计 网 页 时 需要 创建 站 点 , 网 站 中 的 本 地 资源 都 必须 放 
置 在 站 点 目录 下 。 


例 2.1: Dreamweaver CS6 站 点 的 创建 

在 “站 点 ”菜单 中 选择 “新 建站 点 ” 子 菜单 , 如 图 2.8 所 示 。 在 弹出 的 “站 点 设置 对 象 ” 
对 话 框 中 单 击 “ 本 地 站 点 文件 夹 ”文本 框 旁 的 文件 夹 按钮 ， 如 图 2.9 所 示 。 接 下 来 在 弹出 的 
窗口 中 选择 根 文件 夹 所 在 的 位 置 ， 如 图 2.10 所 示 。 回 到 “站 点 设置 对 象 ”对 话 框 ， 在 “站 点 
名 称 ” 后 的 文本 框 内 输入 “mysite” 后 ， 单 击 “ 保 存 ” 按 钮 保存 站 点 信息 ， 如 图 2.11 所 示 。 

此 时 创建 的 站 点 为 静态 网 站 ， 用 于 制作 基于 HIML、CSS 和 JavaScript 的 页 面 。 如 果 
需要 开发 服务 器 端 程序 ， 则 需要 对 服务 器 进行 相应 配置 ， 如 图 2.12 所 示 。 
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图 2.8 “新 建站 点 ” 子 菜单 
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图 2.11 命名 站 点 图 2.12 配置 服务 器 


例 2.2: 修改 新 建文 件 的 类 型 


Dreamweaver CS6 默认 新 建文 件 时 采用 XHTML 模板 新 建文 件 ， 为 了 方便 创建 
HTML5 文件 , 需要 在 “首选 参数 ”对 话 框 中 进行 修改 首先 单 击 “ 编 辑 ” 菜 单 , 选中 “ 首 
选 参数 ” 子 菜单 ， 如 图 2.13 所 示 。 在 弹出 的 “首选 参数 ”对 话 框 中 打开 “默认 文档 类 型 
(DTD)” 下 拉 列 表 ， 选 择 “HTML5” 后 ， 单 击 “确定 ”按钮 完成 设置 ， 如 图 2.14 所 示 。 
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图 2.13 “首选 参数 ” 子 菜单 
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图 2.14 


“首选 参数 ”对 话 框 


2.2 常用 HTMLS 标签 的 应 用 


HIMLS 握 弃 一 些 标签 的 同时 保留 了 绝 大 多 数 HTML 4.0 的 标签 ， 
。 以 下 分 几 类 介绍 这 些 常用 标签 的 用 法 。 


签 





2.2.1 页 面 文字 版 式 标签 
1. 段落 标签 <p> 


<p> 标 签 用 于 定义 段落 ， 是 网 页 中 最 常用 的 标签 ， 














生成 空白 区 域 ， 便 于 阅读 。 
2. 回 车 换行 标签 <br> 














<br> 标 签 在 出 现 的 位 置 插入 一 个 简单 的 换行 符 。<br> 标 签 是 空 标签 , 即 没有 结束 标签 。 
<br> 标 签 只 是 简单 地 开始 新 的 一 行 ， 而 当 浏览 器 遇 到 <p> 标 签 时 ， 通 常会 在 相信 
间 插 入 一 些 垂直 的 间距 ， 这 两 个 标签 在 显示 效果 上 有 明显 区 别 。 


例 2.3: 段落 与 回 车 的 区 别 


在 Dreamweaver CS6 中 输入 唐诗 内 容 , 并 使 用 段落 和 回 车 换行 标签 对 唐诗 ii 


版 ， 最 终 的 排版 效果 ， 如 图 2.15 所 示 。 




















尤其 是 一 些 常用 标 


通过 段落 标签 可 以 在 段落 前 后 自动 


的 段落 之 


行 基本 排 
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安 能 共计 折 屡 事权 外 ， 公开 开 








图 2.15 唐诗 排版 效果 





首先 参照 例 2.1 创建 一 个 新 文件 , 然后 用 Windows 操作 系统 自 带 的 记事 本 打开 提供 的 
素材 文件 2-2.txt, 选中 文件 中 的 所 有 文字 并 进行 复制 , 如 图 2.16 所 示 。 切 换 到 Dreamweaver 
后 , 在 编辑 区 域 单 击 右键 , 从 弹出 菜单 中 选择 “粘贴 ”后 , 将 文本 粘贴 至 页 面 内 , 如 图 2.17 
所 示 。 

| 辐 2-2txt - 记事 本 
文件 人 编 (D) 格式 (O) 

















图 2.16 复制 文本 
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图 2.17 ”粘贴 文本 


将 光标 定位 到 “梦游 天 姥 吟 留 别 ”和 “【 作 者 】 李 白 【 朝 代 】 唐 ”两 部 分 文字 后 ， 按 
键盘 上 的 回 车 键 ， 效 果 如 图 2.18 所 示 。 接 下 来 在 诗 中 每 个 句号 的 后 面 进行 回 车 换行 ， 形 成 
的 最 终 效果 如 图 2.15 所 示 。 进 行 回 车 换行 的 方法 有 三 种 : 方法 一 ,将 光标 放 在 一 句 诗 的 句 
号 后 , 直接 在 键盘 上 按 组 合 键 ShifttEnter; 方法 二 , 将 光标 放 在 一 句 诗 的 句号 后 , 选择 “ 插 
入 ”菜单 后 ， 按 照 以 下 顺序 选择 子 菜单 “HTML”|“ 特 殊 字符 ”| “换行 符 ”， 如 图 2.19 
所 示 ; 方法 三 , 在 左 侧 的 代码 窗口 中 ,将 光标 放 在 一 句 诗 的 句号 后 ， hn es Tbe 
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图 2.18 添加 段落 
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bcss IDD [元 
图 2.19 添加 回 车 换行 
3. 标题 标签 


标题 标签 共有 六 级 ，<hl> 一 <h6> 标 签 用 于 定义 标题 。<hl> 定 义 最 大 的 标题 ，<h6> 定 
义 最 小 的 标题 ， 各 级 标题 与 默认 的 段落 文字 的 对 比 ， 如 图 2.20 所 示 。 
口 


| 局 ENHSsite\2-3.html ”| 搜索 - DD- 从 @ 


| 不 标题 和 水 平生 
X 国 风 和 = 


标题 1 


标题 2 
标题 3 


标题 6 





默认 段落 文字 








图 2.20 标题 和 水 平 线 
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4. 水 平 线 标签 


<hr> 标 签 在 HIML 页 面 中 创建 一 条 水 平 线 。 水 平 线 可 以 在 视觉 上 将 文档 分 隔 成 各 个 
部 分 ， 往 往 用 于 实现 比较 简单 的 分 割 效果 。 

例 2.4: 标题 与 水 平 线 

(1) 在 Dreamweaver 设计 窗口 内 输入 “标题 1” 到 “标题 6” 文 字 , 在 每 行 末 尾 用 回 车 
将 其 分 为 段落 ， 最 后 输入 “默认 段落 文字 ”。 

(2) 将 光标 放 在 “标题 1” 文 字 处 ， 在 “属性 ”面板 的 “格式 ”列表 中 选择 “标题 
1”， 如 图 2.21 所 示 。 





vige 目标 ' 
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EE 于 七 当 当 标题 





图 2.21 设置 标题 
(3) 按照 以 上 做 法 完成 其 他 标题 。 
(4) 先后 将 光标 放 在 “标题 6” 和 “默认 段落 文字 ”后 ， 选 择 “插入 ”菜单 的 子 菜单 
“HTML”| “水平 线 ”， 在 其 后 各 插入 一 条 水 平 线 ， 如 图 2.22 所 示 。 
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| Widget(W).. 
Spry(S) 
jQuery Mobile 
InContext Editing() 
数据 对 象 ()) 
自 定义 收藏 夹 (U).- 


获取 更 多 对 象 (G)- 
2.22 插入 水 平 线 


(5) 用 鼠标 点 选 “ 默 认 段 落 文字 ”后 的 水 平 线 ， 在 “属性 ”面板 中 设置 水 平 线 的 长 度 
和 高 度 ， 如 图 2.23 所 示 。 
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图 2.23 设置 水 平 线 
5. 加 粗 和 和 斜体 


在 HTMLS 以 前 的 版 本 中 ， 为 设置 文字 样式 提供 了 一 些 标签 ， 但 在 HTMLS5 中 已 经 不 再 
使 用 其 中 的 一 些 标签 ， 推 荐 采用 CSS 设置 文字 的 样式 ， 这 里 只 介绍 加 粗 和 和 斜体 样式 的 应 用 。 

例 2.5: 加 粗 、 斜 体 标签 应 用 

(1) 打开 例 2.3 中 完成 的 唐诗 ， 另 存 为 2-21.html。 将 光标 放置 在 标题 “梦游 天 姥 吟 留 
别 ” 处 ， 在 “属性 ”面板 中 设置 为 一 级 标题 ， 如 图 2.24 所 示 。 然 后 选择 “【 作 者 】” 并 在 
“属性 ”面板 中 点 选 “B” 加 粗 标签 ， 如 图 2.25 所 示 ， 采 用 同样 的 做 法 对 “【 朝 代 】” 两 
字 设 置 加 粗 效 果 。 


Dw 国 。 2 吕 " IE IC 村 3 
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<title> 自 落 与 回 车 </ticle> 
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图 2.24 设置 标题 
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图 2.25 加 粗 字体 


(2) 选中 “李白 ”两 字 ， 并 在 “属性 ”面板 中 点 选 “I” 和 斜体 标签 ， 将 其 设置 为 斜体 ， 
如 图 2.26 所 示 ， 采 用 同样 的 做 法 将 “ 唐 ” 字 设 置 为 斜体 。 
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<br> 
天 姥 连 天 向 天 横 ， 势 拨 五 
岳 搞 赤 城 。<brz> 
天 台 四 万 八 千丈， 对 此 谷 
倒 东 南 倾 。<br> 


也 钾 由 之 社 旦 捧 。。 加 六 


bodv) Cn) Cen 



























































图 2.26 设置 斜体 


(3) 将 光标 放 在 “【 作 者 】” 前 ， 插 入 水 平 线 ， 如 图 2.27 所 示 ， 在 浏览 器 中 的 预览 结 
果 如 图 2.28 所 示 。 
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图 2.27 插入 水 平 线 
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© 站 NNSA\HSshe\2-21.htn 局 -上 感 RESB<= 
梦游 天 姥 吟 留 别 


【作者 】 幸 后 【朝代 ] 请 


海 容 谈 蕊 洲 ， 烟 涛 微 花 信 难 未 ; 
区 从 省 云霞 明天 或 可 哮 ， 


嫉 连 天 向 天 横 ， 势 拟 五 后 挤 刘 城 。 
Ra 对 此 褒 倒 东南 倾 。 








人 v 
.天 招 渗 落下 由 底 、 日 自 归 要 全 提 
图 2.28 在 浏览 器 中 预览 





2.2.2 ”图像 标签 

图 像 是 网 页 设计 中 最 常用 的 元 素 之 一 ， 通 过 使 用 图 像 可 以 使 页 面 产生 图 文 并 茂 的 效 
果 ， 目 前 主流 网 站 都 离 不 开 图 像 的 应 用 。 

1. 图 像 格式 


图 像 的 格式 种 类 众多 ， 在 网 页 上 使 用 的 图 像 格式 通常 有 三 种 : JPG、PNG 和 GIF。 三 


种 图 像 格式 各 有 特点 。 
JPG 的 全 名 是 JPEG(Joint Photo graphic Expert Group 联合 图 像 专家 组 ), 可 以 用 24 位 颜 
色 存 储 单个 位 图 。 它 支持 最 高 级 别 的 压缩 ， 当 然 这 种 压缩 会 导致 图 像 画 质 的 降低 。 
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GIF(Graphics Interchange Format) 是 指 “ 图 像 互 换 格式 ”， 是 早 在 1987 年 就 被 开发 出 
来 的 图 像 文件 格式 。GIF 文件 采用 一 种 基于 LZW 算法 的 含 连续 色调 的 无 损 压 缩 格式 ， 压 
缩 率 一 般 在 50% 左 右 。GIF 格式 可 以 存 多 幅 彩 色 图 像 ， 如 果 把 存放 在 一 个 文件 中 的 多 幅 图 
像 逐 幅 读 出 并 显示 到 屏幕 上 ， 就 可 构成 一 种 最 简单 的 动画 。 

PNG 是 便携 式 网 络 图 形 (Portable Network Graphics) 的 简称 ， 可 以 提供 无 损 压 缩 的 图 像 
格式 ， 压 缩 比 高 ， 生 成 的 文件 体积 小 。 


2. 图 像 标签 


<img> 标 签 用 于 显示 图 像 ， 它 有 两 个 必需 的 属性 一 一 src 和 alt，src 属性 的 值 是 图 像 文 
件 的 URL，URL 可 以 采用 相对 路 径 表 示 ， 也 可 以 采用 绝对 路 径 表 示 。 绝 对 路 径 就 是 文件 
或 目录 在 硬盘 上 真正 的 路 径 ， 也 叫 物理 路 径 。 例 如 ，index.html 文件 存放 在 e:/mysite/h5 下 ， 
这 就 是 绝对 路 径 。 在 网 络 中 ， 以 http 开头 的 链接 都 是 绝对 路 径 ， 绝 对 路 径 就 是 网 站 上 的 文 
件 或 目录 在 硬盘 上 真正 的 路 径 ， 但 制作 网 页 时 很 少 用 到 ， 更 多 使 用 相对 路 径 。 相 对 路 径 就 
是 相对 于 当前 文件 的 路 径 , 例如 index 所 在 同一 目录 下 的 文件 abouthtml,， 用 相对 路 径 表示 
时 直接 用 文件 名 即 可 ， 如 果 是 hs 目录 中 image 子 目 录 下 的 title.jpg 文件 ， 相 对 路 径 表示 为 
imageytitlejpg， 如 图 2.29 所 示 。 相 对 路 径 经 常 使 用 一 些 特定 符号 表述 路 径 : 

"/": 代表 目前 所 在 的 目录 。 

"../":， 代表 上 一 层 目录 。 

": 代表 根 目录 。 

























图 2.29 目录 结构 示意 图 

alt 属性 也 是 必需 的 ,是 图 像 无 法 显示 时 的 替代 文字 ， 即 使 图 像 显示 不 出 来 ， 也 可 以 通 
过 文字 描述 来 说 明 图 像 的 内 容 。 

在 Dreamweaver 中 插入 和 使 用 图 像 文件 非常 方便 ,但 依然 保留 了 一 些 HIML5 不 再 使 
用 或 不 推荐 使 用 的 属性 ， 这 些 属 性 在 HTMLS5 规范 中 去 除 后 转交 CSS 进行 定义 和 使 用 。 本 
章 介 绍 基本 的 图 像 标签 的 使 用 方法 。 

例 2.6: 使 用 图 像 文件 

(1) 在 站 点 根 目录 下 创建 image 文件 夹 ,并 将 “libaijpg” 图 片 文件 拖 放 到 该 文件 夹 内 ， 
如 图 2.30 所 示 。 
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日 国 站 点 - ]Esite (C... 文件 夹 
日 image 文件 来 
L libai.jps ”46KB JPE 图 像 





图 2.30 图 像 文件 的 位 置 
C) 将 光标 放 在 最 后 一 行 诗句 之 后 并 回 车 ， 在 “常用 ”工具 栏 中 单 击 “图像” 按钮 (如 
2.31 左 图 所 示 )， 或 者 在 “插入 ”菜单 中 选择 “图 像 ” 子 菜单 (如 图 2.31 右 图 所 示 )， 打 
开 “ 选 择 图 像 源 文件 ”对 话 框 ， 如 图 2.32 所 示 ， 选 择 “libaijpg” 图 像 文件 后 单 击 “确定 ” 
按钮 。 
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图 2.31 插入 图 像 
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图 2.32 选择 图 像 源 文件 


G) 在 弹出 的 “图 像 标签 辅助 功能 属性 ”对 话 框 的 “替换 文本 ”处 输入 “李白 ”， 单 击 
“确定 ”按钮 将 图 像 插入 光标 所 在 位 置 , 如 图 2.33 所 示 。 在 浏览 器 中 的 预览 结果 如 图 2.34 所 示 。 
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如 果 在 插入 对 象 时 不 想 输入 此 信息 ， 造 更改- 力 助 功 
询 - 首 选 参数 。 

















图 2.33 设置 图 像 标签 辅助 功能 属性 图 2.34 预览 结果 


在 Dreamweaver 中 点 选择 入 的 图 像 后 ，“ 属 性 ”面板 中 出 现 对 图 像 进行 设置 的 属性 ， 如 
2.35 所 示 。“ 源 文件 ”表示 图 像 源 文件 的 路 径 信息 ， 在 “链接 ”处 可 以 设置 图 像 链接 ， 在 
“高 ”和 “ 宽 ” 处 可 以 设置 图 像 在 浏览 器 中 显示 的 大 小 , 单位 默认 是 “px”, 右 侧 的 “锁定 ” 
图 标 可 以 还 原 图 像 原 来 的 尺寸 。“ 属 性 ”面板 左下 方 的 三 个 图 标 用 于 在 图 像 上 设置 热点 。 
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图 2.35 图 像 属性 面板 
2.2.3 ”列表 标签 


在 网 页 中 ， 对 于 相同 类 型 的 文字 ， 往 往 采用 列表 的 方式 将 其 分 类 排列 ，HTML 中 有 两 
类 列表 : 项 目 列表 (也 称 无 序列 表 ) 和 编号 列表 (也 称 有 序列 表 )， 如 图 2.36 所 示 。 项 目 列表 在 
列表 项 的 前 面 只 有 项 目 符号 ， 默 认 状态 下 是 圆 点 ， 编 号 列表 在 项 目 项 的 前 面 是 有 序 的 序号 。 
口 x 
站 CAUsersVoe\Docum P - 0 剧 项 目 列 志 司 号 列 志 x 
项 目 列表 
* 项 目 1 
。 项 目 2 
* 项 目 3 


编号 列表 














图 2.36 项 目 列表 与 编号 列表 
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项 目 列表 的 标签 分 为 两 层 ， 外 层 为 <ul></ul>， 表 明 这 是 一 个 项 目 列表 ， 列 表 中 的 每 一 项 
用 <li></i> 标 签 定义 。 编号 列表 的 外 层 标签 为 <ol></ol>, 列表 项 的 标签 与 项 目 列表 相同 , 图 2.36 
中 项 目 列表 与 编号 列表 的 源 代码 如 下 : 





例 2.7: 制作 唐诗 目录 
(1) 将 素材 “唐诗 选编 .docx” 文 件 复制 到 站 点 文件 夹 中 ， 并 选择 “文件 ”菜单 的 “ 导 
入 ”| “Word 文档 ” 子 菜单 ， 如 图 2.37 所 示 。 在 弹出 的 对 话 框 中 选择 “唐诗 选编 .docx” 文 









































件 后 ， 将 文档 内 容 插入 到 页 面 中 ， 如 图 2.38 所 示 。 
Dw BH] “ee) ma) s\) wt 二 SAwordxs x 
Dom Sr ED [Bi 4 GF 
Bo a 国 
i 
El 
Ss 
| 后 为 模板 IM)… ke 
9 © 
SS J | 
| 蕊 3 , | Hs) et ee i 
5 有 > ee EQ 
SHB fe: Ez EY 司 
Le 日 大 9 Yerd 局 各 自 类 (C) 
237 “导入 ”菜单 2.38 选择 要 导入 的 文件 


(2) 插入 后 的 文档 内 容 每 行 均 以 回 车 (<br> 标 签 ) 结 尾 , 在 制作 两 类 列表 时 都 需要 项 目 为 
段落 状态 ， 因 此 需要 将 所 有 的 回 车 标签 蔡 换 成 <p> 标 签 。 首 先 将 光标 放置 在 左 侧 的 代码 窗 
口中 ， 然 后 选择 “编辑 ”菜单 的 “查找 和 蔡 换 ” 子 菜单 ， 如 图 2.39 所 示 。 在 弹出 的 “查找 
和 替换 ”对 话 框 的 “查找 ”处 输入 “<br>”， 在 “替换 ”处 输入 “<p>” 后 ， 单 击 “ 替 换 
全 部 ”按钮 ， 葵 换 全 部 换行 标签 ， 如 图 2.40 所 示 。 
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图 2.39 “查找 和 蔡 换 ” 子 菜单 图 2.40 “查找 和 替换 ”对 话 框 


(3) 将 光标 放置 在 文本 “唐诗 选编 ”处 , 将 其 设置 为 Hl 标题 ,。 选中 文本 “李白 诗 选 ” 
后 ， 在 “属性 ”面板 中 单 击 “项 目 列表 ”按钮 ， 将 其 设置 为 项 目 列表 ， 同 时 单 击 “ 加 粗 ” 
按钮 ， 设 为 粗 体 ， 如 图 2.41 所 示 。 将 其 他 诗人 的 标题 都 设置 为 同样 的 效果 。 

(4) 选择 文本 “李白 诗 选 ” 以 下 各 行 诗 名 后 ， 在 “属性 ”面板 中 单 击 “ 编 号 列表 ” 按 
钮 ， 将 其 设置 为 编号 列表 ， 如 图 2.42 所 示 ， 参 照 此 步 操作 完成 其 他 部 分 。 
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图 2.41 设置 项 目 列表 
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图 2.42 设置 编号 列表 
2.2.4” 超 链接 标签 


超 链接 是 用 于 从 一 个 页 面 链接 到 另 一 个 页 面 的 一 种 应 用 ， 是 HIML 最 为 重要 的 一 个 
标签 ， 目 前 互联 网 上 的 各 种 应 用 中 都 会 用 到 超 链接 。 超 链接 标签 <a></a> 最 重要 的 属性 是 
href， 用 于 指定 链接 的 目标 。 在 浏览 器 中 ， 链 接 的 默认 外 观 是 : 未 被 访问 的 链接 带 有 下 画 
线 且 是 蓝 色 的 ， 已 访问 的 链接 带 有 下 画 线 且 是 紫色 的 ， 活 动 链接 带 有 下 画 线 且 是 红色 的 。 

超 链接 标签 的 典型 样式 : 

<a hre 合 "http:/www.163.com"> 网 易 </a>。 标 签 之 间 的 文字 用 于 在 页 面 上 进行 显示 ， 如 
图 2.43 所 示 ， 真 正 跳 转 的 目标 地 址 由 href 属性 给 出 。 

二 “上 X 
图 CNusersyoe\DocumP -上 碟 天 要 X 档 




















网 易 


图 2.43” 超 链接 示例 


空 链接 是 一 种 特殊 的 连接 ， 即 href 属性 不 是 具体 的 URL 信息 而 是 
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在 页 面 上 会 正常 显示 ， 但 单 击 链接 不 会 发 生 跳 转 。 
超 链 接 除了 href 属性 之 外 ， 还 有 一 些 其 他 常用 属性 ， 规 定 如 下 : 
download="filename" 规 定 被 下 载 的 超 链接 目标 。 
media="media_query" 规 定 被 链接 文档 是 为 何 种 媒介 /设备 优化 的 。 
rel ="text" 规 定 当前 文档 与 被 链接 文档 之 间 的 关系 。 
target=" blank" 规 定 在 何 处 打开 链接 文档 ， 除 了 _blank 外 ， 还 有 parent、_self、_top 等 。 


例 2.8: 
(1) 首先 给 


给 唐诗 目录 添加 超 链接 
“《 望 庐山 瀑布 》” 添 加 空 链接 。 选 中 “《 望 庐山 瀑布 》”， 


的 “链接 ”处 输入 “#”， 如 图 2.44 所 示 。 


#2 ， 


。35° 


此 时 链接 


在 “属性 ”面板 
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图 2.44 创建 空 链接 


(2) 用 光标 选择 “《 早 发 白 帝 城 》” 后 ， 单 击 “ 常 用 ”工具 栏 上 的 “超级 链接 ”按钮 ， 
如 图 2.45 所 示 , 在 弹出 的 “选择 文件 ”对 话 框 中 选择 链接 文件 ， 如 图 2.46 所 示 , 单 击 “ 确 
定 ”按钮 后 创建 链接 。 






























































加 eA 扣 
址 择 文 并 包 目 - St 
Era [ES 
DW 六 雹 各 (Ej 二 二 (VW 括 和 (I) 修改 IM) 格 区 [0) 全 人 中” 尖 S(S) 鱼 站 地 
师 [请 | 条 Mebie [Conteaedung 文 E 9、 ae 1 
TS EC APE S| 加 pe 3 
I re 站 oa 
可 三 :6 "| 座 洁 } 
:28 ”| 唐诗 选编 neem Tp 
13 ,李白 诗 选 HE 于 国 
1 《< 沁 广 山 温 布 > mm ] GR 
3 En 
| 
图 2.45 “超级 链接 ”按钮 图 2.46 选中 链接 文件 
(3) 选择 “《 梦 游 天 姥 吟 留 别 》” 后 ， 在 “属性 ”面板 中 的 “链接 ”文本 框 后 ， 拖 放 
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“链接 ”符号 至 “文件 ”面板 处 要 链接 的 文件 ， 如 图 2.47 所 示 。 在 浏览 器 中 的 预览 结果 如 


图 2.48 所 示 。 
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图 2.48 预览 结果 
2.2.5 ”表格 标签 


表格 是 网 页 中 非常 常用 的 一 种 工具 ， 不 仅 可 以 用 来 显示 排列 数据 ， 还 可 以 利用 表格 
简单 的 页 面 排版 。 的 网 页 大 量 采 用 表格 进行 排版 布局 ， 后 来 逐渐 被 div 标签 结合 CSS 代替 。 














EF 行 


表格 标签 较为 复杂 ， 由 多 个 标签 组 成 ， 且 存在 一 定 的 位 置 和 嵌 套 关系 ， 因 此 对 于 初学 


者 而 言 不 容易 掌握 ， 但 在 Dreamweaver 中 可 以 较为 方便 地 插入 和 编辑 表格 。 
例 2.9: 在 Dreamweaver 中 创建 表格 


选择 “插入 ”菜单 的 “表格 ” 子 菜单 , 如 图 2.49 所 示 。 在 弹出 的 “表格 ”对 话 框 中 输 
入 “ 行 数 ” 和 “ 列 数 ”以 及 表格 的 宽度 , 如 图 2.50 所 示 。 单 击 “ 确 定 ”按钮 后 会 在 光标 所 





在 处 插入 指定 行 数 和 列 数 的 表格 ， 如 图 2.51 所 示 。 
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图 2.49 “插入 ”菜单 图 2.50 “表格 ”对 话 框 
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图 2.51 创建 完成 的 表格 以 及 表格 的 属性 面板 


在 图 2.50 所 示 的 对 话 框 中 ， 除 了 可 以 设置 表格 的 行 数 和 列 数 ， 还 可 以 设置 表格 的 其 他 属 
性 。 其 中 表格 的 宽度 有 两 种 单位 ， 一 种 是 以 像素 pixel 为 单位 ， 可 以 将 表格 设 定 成 固定 宽度 ; 
另 一 种 是 百分比 (9%%)， 采 用 百分比 设置 的 表格 的 实际 宽度 会 随 着 浏览 器 宽度 的 变化 而 变化 。 

在 “表格 ”对 话 框 中 ， 默 认 表 格 边框 粗细 为 1 像素 ， 单 元 格 边 距 和 单元 格 间距 为 0。 
表格 标题 和 摘要 也 可 以 在 此 处 设置 。 

插入 成 功 的 表格 的 标签 如 下 所 示 ， 其 中 各 个 标签 的 作用 不 同 : 
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<table></table> 标 签 是 表格 的 外 层 标签 ， 用 于 定义 整个 表格 ， 在 这 对 标签 里 可 以 设置 
表格 的 一 些 属性 。 

border 属性 用 于 设 定 表格 边框 的 宽度 ， 单 位 是 pixel; cellpadding 属性 用 于 设 定单 元 格 
的 边沿 与 其 内 容 之 间 的 空白 ， 单 位 可 以 用 pixel， 也 可 以 用 %; cellspacing 属性 用 于 设置 单 
元 格 之 间 的 空白 ， 单 位 是 pixel 或 %; width 属性 用 于 设置 表格 的 宽度 ， 单 位 是 % 或 pixel。 

<tr></tr> 标 签 用 于 定义 表格 中 的 行 , 在 这 对 标签 中 可 以 包含 一 对 或 多 对 <td></td> 标 签 。 

<td></td> 标 签 用 于 定义 表格 中 的 标准 单元 格 。<th></th> 也 是 单元 格 的 一 种 ， 主 要 用 于 
表 头 单元 格 的 定义 。 

<caption> 标 签 用 于 定义 表格 的 标题 ， 一 般 必 须 紧 随 <table> 标 签 之 后 。 

在 HIML 中 创建 完成 的 表格 可 以 编辑 成 一 些 特定 样式 的 表格 , Dreamweaver 提供 了 非常 
方便 的 编辑 功能 ， 可 以 对 表格 进行 单元 格 的 合并 、 拆 分 ， 以 及 行 或 列 的 插入 和 删除 等 操作 。 

例 2.10: 在 Dreamweaver 中 编辑 表格 

(1) 在 上 面 创建 的 表格 中 选择 两 个 连续 的 单元 格 。 在 “属性 ”面板 中 单 击 “ 合 并 ” 单 
元 格 按钮 ， 将 这 两 个 单元 格 合并 成 一 个 单元 格 ， 如 图 2.52 所 示 。 













































图 2.52 合并 单元 格 


第 2 章 HIMLS 基础 。39 。 


(2) 将 光标 置 于 一 个 单元 格 内 ， 在 “属性 ”面板 中 单 击 “ 拆 分 ”单元 格 按钮 ， 在 弹出 
的 对 话 框 中 设置 拆 分 成 行 ， 并 设置 拆 分 的 行 数 ， 如 图 2.53 所 示 ， 单 击 “确定 ”按钮 后 将 该 











单元 格 拆 分 成 两 行 。 
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图 2.53 拆 分 单元 格 


(3) 将 光标 置 于 一 个 单元 格 内 ， 在 “属性 ”面板 中 单 击 “ 背 景 颜色 ”菜单 ， 在 弹出 的 
色彩 面板 中 选择 一 种 颜色 ， 如 图 2.54 所 示 ， 将 该 单元 格 的 颜色 设置 为 彩色 。 
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图 2.54 设置 单元 格 背 景色 


(4) 将 光标 置 于 一 个 单元 格 内 并 单 击 右键 ， 在 弹出 的 菜单 中 选择 “表格 ”， 在 子 菜单 
中 选择 “插入 行 ”后 ， 会 在 当前 行 的 前 面 插入 一 行 表格 ， 如 图 2.55 所 示 。 插 入 列 、 删 除 行 
和 列 的 做 法 与 此 类 似 。 预 览 结果 如 图 2.56 所 示 。 
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图 2.55 插入 单元 格 图 2.56 预览 结果 


2.3 ”常用 HTMLS 表单 


表单 是 HTML 中 用 于 实现 交互 功能 的 主要 元 素 ， 自 从 表单 出 现在 HTML 的 应 用 中 之 
后 ， 就 成 了 构造 用 户 交互 界面 必 不 可 少 的 工具 。HIML5 进一步 强化 和 完善 了 表单 的 交互 
功能 以 及 用 户 体验 , 将 原来 一 些 只 能 通过 其 他 脚本 实现 的 功能 (如 对 表单 内 容 的 验证 、 表单 
内 容 的 自动 完成 等 功能 )， 在 HTML5 表单 中 实现 了 直接 支持 ， 减 少 了 表单 对 JavaScript 脚 
本 的 依赖 性 。 对 表单 增加 的 功能 和 属性 便于 用 户 设计 更 为 复杂 的 应 用 。 

表单 以 <form> 元 素 作为 容器 ， 在 该 元 素 中 设置 用 于 实现 交互 的 表单 元 素 ， 在 用 户 提交 
表单 页 面 时 ， 表 单 将 各 个 表单 元 素 的 值 传递 给 服务 器 。 


2.3.1 <form> 标 签 














<form> 标 签 是 表单 的 容器 , 其 他 所 有 表单 元 素 都 需要 放 在 <form> 标 签 内 部 。 在 HTML5 
中 , 在 表单 控件 中 可 以 添加 表单 标签 的 id 属性 ， 用 以 表明 该 控件 属于 哪个 表单 ， 便 于 统一 
管理 ， 这 样 的 用 法 类 似 于 样式 表 的 管理 方法 。 用 法 如 下 : 

<fom id="testform"> 

<textarea form="testform"></textarea></form> 

表单 有 两 个 重要 属性 : action 属性 可 以 设 定 表单 提交 的 服务 器 地 址 ，method 属性 为 表 
单 提交 数据 的 方法 ， 有 两 种 方法 (GET 和 POST)。GET 方法 使 用 URL 传递 参数 ， 如 
http:/IP?namel=valuel&name2=value2，? 表 示 传 递 参数 ，? 后 面 采 用 name=value 的 形式 传 
递 ， 多 个 参数 之 间 用 & 连 接 。 采 用 这 种 URL 传递 参数 并 不 安全 ， 所 有 信息 可 在 地 址 栏 中 以 
明文 方式 显示 ， 并 且 可 以 通过 地 址 栏 随意 修改 传递 的 数据 。 另 一 方面 ， 这 种 方式 下 传递 数 

















第 2 章 HIMLS 基础 41。 


据 量 有 限 ， 传 递 数据 较 少 。POST 方法 使 用 HTTP 请 求 传递 数据 ， 传 递 数据 量 大 ， 且 不 会 
在 URL 地 址 栏 中 显示 ， 相 对 较为 安全 。 


2.3.2 ”<input> 标 签 
<input> 标 签 在 表单 中 用 于 获取 输入 数据 ， 根 据 type 属性 值 的 不 同 ， 在 Web 页 面 上 显 


示 出 不 同 的 样式 效果 。<input> 标 签 的 常用 属性 如 表 2.1 所 示 。 
表 2.1 <input> 标 签 的 常用 属性 


属性 名 称 | 属性 值 用 途 





text 文本 输入 框 





password | 密码 输入 框 ， 输 入 后 不 显示 实际 内 容 ， 只 显示 黑 点 





radio 单 选 按 钮 


























checkbox | 复 选 框 
file 文件 上 传 按钮 
submit 提交 按钮 ， 用 于 提交 表单 数据 
reset 重 置 按钮 ， 将 表单 数据 重 置 为 初始 状态 
type image 图 形 提交 按钮 ， 功 能 同 submit 属性 ， 可 以 提交 数据 
button 普通 按钮 
email 用 于 输入 和 校 验 email 地 址 ， 样 式 同 text 属性 ， 但 可 以 自动 校 验 email 格式 
ul 用 于 输入 和 校 验 URL 地 址 ， 样 式 同 text 属性 ， 但 可 以 自动 校 验 URL 格式 





number 用 于 接收 数字 格式 的 数据 ， 并 且 可 以 设置 数值 范围 验证 





range 以 滑动 条 的 方式 让 用 户 在 一 定 范围 内 输入 数值 数据 














date 日 期 和 时 间 选 择 器 
search 搜索 域 
name 用 于 对 表单 元 素 命名 
value name 和 value 属性 需要 同时 存在 ， 提 交 时 ， 提 交 的 是 value 属性 的 值 











checked checked 用 于 单 选 按钮 或 复 选 框 的 选中 


<input> 标 签 的 type 属性 值 较 多 ,在 HIML5 中 又 添加 了 一 些 新 的 功能 ,在 Dreamweaver 
的 工具 栏 中 只 支持 HIML 4.0 中 最 为 常见 的 一 些 ， 可 以 通过 其 设计 界面 进行 所 见 即 所 得 的 
设计 。 

例 2.11: 利用 表单 设计 用 户 注册 页 面 

(1) 在 工具 栏 上 单 击 “ 表 单 ” 图 标 ， 在 设计 窗口 中 添加 一 个 表单 ， 如 图 2.57 所 示 。 在 
设计 窗口 中 , 这 个 表单 以 红色 的 虚线 框 表示 , 但 在 浏览 器 中 进行 预览 时 不 会 显示 该 虚线 框 。 

(2) 将 光标 放置 在 表单 的 虚线 框 内 ， 选 择 “插入 ”菜单 的 “表格 ” 子 菜单 ， 在 表单 内 
插入 一 个 7 行 2 列 、 宽 度 为 400 像素 的 表格 ， 用 于 简单 布局 ， 如 图 2.58 所 示 。 
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RE i 行政] 列 区 
le ss 表格 充 度 : 200| 蕊 素 习 
代码 | 拆 分 | 设计， 实时 视 国 ， 三 电台 吕 二 [成 C 。 标题; 注 开 边框 得 网 :|] | 像素 
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rr 
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<form name-"forml® | | 
[ethod~"post" action"™ EE “EE 
四 -or [ss 中 
国明 </body> 
加 EE 确定 “| 取消 | 
图 2.57 插入 表单 图 2.58 插入 表格 
(3) 将 第 一 行 和 最 后 一 行 表格 的 单元 格 分 别 进行 合并 ， 如 图 2.59 所 示 。 
[EPE Er | 
ee ee 
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了 5 <title> 注 册 </title> 证 
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图 2.59 合并 单元 格 


(4) 将 光标 放置 在 最 后 一 行 的 单元 格 内 ， 插 入 一 个 1 行 2 列 的 表格 ， 将 表格 宽度 设置 


为 100%， 将 边框 粗细 设 为 0， 如 图 2.60 所 示 。 

































































雪 格 允 
表格 大 小 
行 数 :I ] 丈 区 
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单元 格 边 距 :| | 恒 
单元 格 间距 :| ] 田 
标题 
国 旦 图 型 
££ | 
酝 助 功能 
标题 : 
摘要 : 
帮助 | 确证 || 取消 




















图 2.60 插入 底部 表格 


(5) 参照 图 2.61， 在 表格 相应 位 置 输入 文字 ， 并 设置 为 右 对 齐 。 
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[ET 
本 
El IEPFESES 
9 全 村 四 FO nn 
mite = 注册 
3 /head> 
| oy 
or 
| nantes’ [sss 
method="post” action= 
加 
区 EJEDI 
加 
了 
12 
到 EM 
图 
| VJ lo .Eu 619 x 1- ITK7T 称 Unicode (UF-B) Ee ET 
[pg 格式 四 天 类 天 -| 了 村 ERIEA Bd ee 
icss IDD [元 -| 链接 人 ) -]e 忆 时， 和 
加 单元 格 。 水 平 (2) 右 对 齐 “| 二 全 不 换行 (0) 口 背景 色 (6) 全 i | 页 
口 志和 要 直人 | 黑人 “| 两 “标题 四) 口 
图 2.61 输入 文字 
» a 9 y » 区 
(6) 在 “用 户 名 ”后 的 单元 格 内 插入 文本 字段 , 将 了 D 设置 为 “usemame”， 如 图 2.62 
所 示 。 
输入 标签 辅 盈 功能 属性 x 
ID: [sernand | 确定 
标 答 | 取消 
加 便 用 "or' 属 性 附加 标 答 标 记 
样式 : 〇 用 标签 标记 环绕 i 
加 无 标签 标记 
位 丁 : 加 在 表单 项 前 
口 在 表单 项 后 


访问 刍 : | Tab 刍 案 引 :| 


如 果 在 播 入 对 象 时 不 起 输入 此 信息 ， 午 
更 改 " 畏 助 功能 "首先 参数。 








图 2.62 插入“ 用户 名 ”文本 字段 


(7) 在 “口令 ”后 的 单元 格 内 插入 文本 字段 ， 将 ID 设置 为 “passwd”， 如 图 2.63 所 
示 。 选 中 刚 创建 的 文本 字段 ， 在 属性 面板 中 将 类 型 修改 为 “密码 ”， 如 图 2.64 所 示 。 以 同 


样 方式 设置 “确认 口令 ”的 文本 字段 。 

















输入 标签 辅助 功能 属性 x 
ID: [passwd | 确定 
标签 : 三 


〇 使 用 Yor' 层 性 附加 标签 标记 帮助 
样式 : 〇 用 标签 标记 环绕 
图 无 标签 标记 


位 童 : 中 在 表 羊 项 前 
口 在 表单 项 后 


访问 键 : 。 Tab 刍 素 引 :| | 


如 果 在 插入 对 象 时 不 想 输入 此 信息 ， 芋 
更 改 " 畏 助 功能 "首选 参数。 











图 2.63 插入 “口令 ”文本 字段 
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图 2.64 设置 “口令 ”文本 字段 的 类 型 为 密码 


(8) 在 “性 别 ” 后 的 单元 格 内 插入 单 选 按钮 组 ， 命 名 为 “usergenda”， 在 “标签 ”一 
栏 中 分 别 设置 为 “ 男 ” 和 “ 女 ”， 用 于 在 页 面 中 显示 ， 在 右 侧 的 “ 值 ” 一 栏 中 对 应 设置 为 


“male” 和 “female”， 如 图 2.65 所 示 。 


单 选 按钮 组 
名 称 :usergenda | | 确定 
单 选 按钮 :可 癌 ) Ele 取消 


标签 值 
另 


项 助 








布局 ,使 用 : 中 换行 符 ( <br> 标签 ) 
吕 表格 








图 2.65 插入 “性 别 ” 单 选 按钮 组 


(9) 在 “兴趣 爱好 ”后 的 单元 格 内 插入 复 选 框 组 , 命名 为 “hobbys”， 按 下 “+” 按 钮 
添加 选择 项 ， 并 将 标签 内 容 设 置 为 阅读 、 音 乐 、 运 动 ， 对 应 的 值 分 别 为 reading、music、 


sports， 如 图 2.66 所 示 。 
复 选 框 组 x 













reading 
育 乐 msie 
sports 








布局 ， 使用: 四 换行 符 ( <br> 标签 ) 
吕 表格 








图 2.66 插入 “兴趣 爱好 ” 复 选 框 组 
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(10) 在 最 底下 一 行 的 表格 内 插入 两 个 按钮 , 在 属性 面板 中 分 别 将 动作 类 型 设置 为 “ 提 
交 表 单 ” 和 “ 重 置 表单 ”， 如 图 2.67 所 示 。 








DW 六。 We) SE TAD WAIM) EIOl E70 KM Sow mH O° Br 
本 
| 口 | 口 抽风 | 名 回回 固 | 国 团 | 图 四 口 | 加 品 | 巴 巴巴 国 马 怠 @ 



















53 </p></td> 

54 </tr> 

55 <tr> 

56 <td colspan="2"> 
<table width="100%" 
border="0"> 

57 <tr> 

58 <td align= 
"center"><iaput type= 
"submit" name="button" 
19="button”value=" 提 交 
"></td> 

59 <td align- 


| ”center 
/td> 


50 </tr> 
61 </table></td> 名 
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图 2.67 插入 “提交 ”和 “ 重 置 ” 按 钮 
(11) 选中 “性 别 ” 单 选 按钮 组 中 的 “ 男 ”选项 ,在 “属性 ”面板 中 将 “初始 状态 ” 设 
置 为 已 勾 选 ， 如 图 2.68 所 示 ， 完 成 后 进行 预览 ， 如 图 2.69 所 示 。 
Dreamweaver 没有 提供 可 视 化 设计 的 input 属性 ， 可 以 在 代码 窗口 中 直接 输入 代码 来 
实现 。 以 下 代码 可 实现 如 图 2.70 所 示 的 效果 。 


DW ximn War) eB SM) WAIM) Wuo) ee se ecm sgH Be 0" Be tg - [= 19% 
| 
回 | 口 本 加 总 因 同 因 | 司 回国 四 口 | 莫 品 已 让 着 蕊 如 开 罚 


| 拆 分 | 这 让 国 网 区 各 品 5 吕 标题 注册 
mn 











































加 区 

上 

等 

国 

省 

a <td height="31" 

| align="right"> 性 别 : </td| 
> 

加 28 <td><p> 

29 <label> 

图 so 


















</label> 
<label> 
<input type= 


"radio” name= , 








HE YTS 
可 



























































图 2.68 设置 默认 性 别 选 项 
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| 长 EE 19 20 2 2 23 2 25| 
26 27 28 [29| 30 z || 
图 2.69 预览 效果 图 2.70 HTML5 表单 新 属性 的 显示 效果 





在 以 上 显示 效果 中 ， 电 子 邮 件 和 URL 的 显示 效果 与 文本 字段 的 外 观 一 样 。 但 是 在 提 
交 页 面 的 时 候 ， 如 果 内 部 内 容 格 式 不 正确 ， 便 会 出 现 相应 的 提示 信息 ， 如 图 2.71 所 示 。 
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EE 











2.71 电子 邮件 和 URL 校 验 显示 效果 


range 为 特定 值 的 范围 ， 以 滑动 条 显示 。 与 其 相关 的 属性 有 : max 规定 允许 的 最 大 值 ， 
min 规定 允许 的 最 小 值 ，step 规定 合法 的 数字 间隔 (如 step="3")，value 规定 默认 值 。search 
用 于 搜索 引擎 ， 与 普通 文本 框 的 用 法 一 样 ， 只 不 过 这 样 更 语义 化 。 


2.3.3 ”列表 控件 

在 HIML5 中 有 两 种 可 以 为 用 户 提供 数据 列表 显示 功能 的 控件 。 其 中 <selece> 标 签 在 
HTML 4.0 中 就 存在 ，datalist 是 HIMLS 中 新 添加 的 标签 。 

1. <select> 标 签 


<selecP> 标 签 实现 的 列表 也 被 称 为 菜单 ， 用 户 可 以 通过 点 选项 目 选择 数据 。Dreamweaver 
支持 以 可 视 化 方式 创建 该 控件 。 与 <selecP> 标 签 相关 的 控件 有 三 种 不 同 的 样式 : 菜单 、 列 表 和 
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跳 转 菜 单 。 

例 2.12: 创建 三 种 不 同样 式 的 选择 菜单 

(1) 将 光标 放置 在 文本 “学 院 ”后 ， 在 表单 工具 栏 中 单 击 “ 选 择 (列表 /菜单 )” 按 钮 ， 
在 弹出 的 对 话 框 中 将 ID 设置 为 “college”， 并 将 “样式 ”设置 为 “无 标签 标记 ”， 单 击 
“确定 ”按钮 ， 如 图 2.72 所 示 。 在 弹出 的 “列表 值 ”对 话 框 的 “项 目标 签 ”一 栏 中 输入 学 
院 信息 ， 在 对 应 的 “ 值 ”一 栏 中 输入 字母 简称 ， 如 图 2.73 所 示 。 


巡 入 标签 二 了 功能 属性 区 
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加 天 F 记 
































贺 列 去 什 x 
位 置 全 在 于 半天 前 4] _ ”国医 7 
口才 项 目标 答 值 i 
访问 刍 Tab 性 索引 信息 工程 学 院 x 
机 械 工程 学 院 jxge 
如 果 在 特 信 对 当时 不 加 六 入 此 信息 ， 适 亚 下 -全 电气 工程 学 院 dage 
二 号 的 - 首 上 多数。 
| 帮助 00) | 
图 2.72 “输入 标签 辅助 功能 属性 ”对 话 框 图 2.73 编辑 学 院 信息 列表 


(2) 将 光标 放置 在 文本 “专业 ”后 ， 重 复 上 一 步 操作 ， 将 了 D 设置 为 “major”， 在 列 
表 中 输入 专业 信息 和 字母 简称 ， 如 图 2.74 所 示 。 设 置 完成 后 ， 点 选 该 控件 ， 在 “属性 ” 面 
板 中 ， 将 “类 型 ”设置 为 “列表 ”， 将 “高 度 ” 设 置 “4”， 如 图 2.75 所 示 。 





项 目标 答 什 








知 
a 
xj 
理 








图 2.74 编辑 专业 列表 图 2.75 设置 类 型 和 高 度 
(3) 将 光标 放置 在 文本 “友情 链接 ”后 ， 插 入 跳 转 菜单 ， 在 弹出 的 对 话 框 中 编辑 文本 
信息 为 “新 浪 网 ”， 将 “选择 时 ， 转 到 URL” 设 置 为 http://www.sina.com， 将 菜单 ID 设 
置 为 “jumpMenu”， 如 图 2.76 所 示 。 完 成 后 的 最 终 预 览 效 果 如 图 2.77 所 示 。 
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选项 口 菜单 之 后 播 入 前 往 斤 局 
口 更 改 URL 后 选择 笔 一 个 项 目 


图 2.76 插入 跳 转 菜单 图 2.77 预览 效果 
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<select> 标 签 由 select 和 option 组 成 ,一 对 <selecfP> 标 签 可 以 包含 多 组 <option> 标 签 ， 上 
面 的 学 院 选项 的 代码 如 下 : 





value 属性 为 传递 的 值 , 当 option 没有 value 属性 时 , 往 后 台 传 递 的 是 <option></option> 
标签 中 的 文字 。 

multiple="multiple" 设 置 select 控件 为 多 选 ， 可 在 界面 中 使 用 Ctrl+ 鼠 标 进行 多 选 。 一 般 
不 用 。 

selected="selected" 为 默认 选中 。 

2. 数据 列表 


数据 列表 是 HTML5 中 新 添加 的 控件 ， 在 Dreamweaver 中 不 支持 可 视 化 设计 。 数 据 列 
表 的 外 观 由 两 部 分 组 成 一 -上 部 的 文本 框 和 下 拉 列 表 ， 标 签 则 由 <input>、<datalis 和 
<option> 三 个 标签 组 成 。 以 下 代码 的 效果 如 图 2.78 所 示 。 














2.78 数据 列表 
2.3.4 ”文本 域 标签 <textarea> 


文本 域 的 功能 与 文本 字段 的 作用 类 似 ,文本 域 的 外 观 能 够 通过 相关 属性 进行 设置 ， 如 
设置 文本 域 的 行 与 列 ， 以 及 滚动 条 的 样式 。 
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例 2.13: 制作 简单 留言 页 面 
(1) 首先 在 页 面 上 插入 表单 ， 参 照 前 面 的 示例 ， 在 表单 内 插入 一 个 4 行 2 列 、 宽 度 500 
像素 的 表格 , 将 其 居中 。 分 别 将 第 一 行 和 最 后 一 行 的 单元 格 合并 , 在 第 一 行内 输入 “留言 板 ”， 
在 第 二 行 和 第 三 行 左边 的 单元 格 内 输入 “留言 标题 ”和 “留言 内 容 ”， 如 图 2.79 所 示 。 
| 


























图 2.79 布局 制作 
(2) 在 “留言 标题 ”后 的 单元 格 内 插入 文本 字段 ,将 ID 设置 为 “ptile”。, 在 “留言 内 容 ” 
后 插入 文本 域 ， 在 弹出 的 对 话 框 中 将 ID 设置 为 “pcontent”， 选 中 刚 创建 的 文本 域 ， 在 属性 
面板 中 设置 “字符 宽度 ”为 40、“ 行 数 ” 为 8， 如 图 2.80 所 示 , 最终 预览 效果 如 图 2.81 所 示 。 
| 信 [ 折 和] 设 + | 实时 图 蚁 . 图 . 内 be 局 区 CO 标题 名 板 ] 
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图 2.80 设置 文本 域 
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图 2.81 预览 效果 
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2.4 本 章 小 结 


本 章 通 过 在 Dreamweaver 中 进行 可 视 化 设计 的 示例 来 讲解 HTML 的 基础 知识 ， 主 要 
介绍 了 HTML 页 面 的 基本 结构 以 及 常用 标签 的 使 用 方法 , 并 对 HTMLS5 中 的 部 分 新 特性 进 
行 重点 讲解 ， 使 学 习 者 能 够 快速 掌握 HTML 的 基本 用 法 。 


2.5 课 后 训练 


1. 使 用 HIMLS 的 基本 标记 创建 一 个 网 页 , 在 页 面 上 显示 自己 学 校 的 名 称 (一 级 标题 )、 
院 系 名 称 (二 级 标题 )、 专 业 名 称 、 班 级 名 称 和 姓名 (后 三 项 设置 为 项 目 列表 )， 参照 图 2.82。 


司 EatHWAH5 PD- © | B21 x ® 
| 


陕西 工业 职业 技术 学 院 | 
信息 工程 学 院 
“计算 机 网 络 技术 专业 
。 网 络 1701 
喘 





图 2.82 个 人 简介 


2. 在 表格 中 制作 唐诗 选编 目录 ， 表 格 在 页 面 上 居中 ， 将 “唐诗 选编- 目录 ”设置 为 一 
级 标题 且 居 中 ， 其 他 参照 图 2.83 设置 。 
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图 2.83 唐诗 选编 目录 


第 2 章 HIML5 基础 “51。 











3. 参照 图 2.84 制作 用 户 调查 表 , “用户 调查 表 ” 为 一 级 标题 ,将 “基本 情况 ”和 “ 调 
查 项 目 ” 设 置 为 粗 体 和 斜体 。 
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图 2.84 用 户 调查 表 
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3.1 CSS 概述 


网 页 的 实现 需要 以 HTML 作为 基础 ， 但 是 HTML 在 设计 之 初 ， 在 样式 的 表现 上 非 
常 简陋 ,在 发 展 过 程 中 为 了 满足 用 户 对 页 面 设计 的 需求 , 不 断 增加 新 的 功能 , 使 得 HTML 
变 得 越 来 越 复 杂 ， 越 来 越 凌 乱 ， 违 背 了 HTML 最 初 的 设计 思想 。 于 是 一 种 新 的 技术 作为 
HTML 的 显示 辅助 工具 便 出 现 了 ， 这 就 是 CSS 样式 单 。 


3.1.1 CSS 简介 


CSS 本 质 上 是 为 HTML 标记 语言 提供 种 样式 描述 , 定义 HTML 中 元 素 的 显示 方式 。 
CSS 在 Web 设计 领域 里 是 一 个 突破 ， 利 用 CSS 可 以 定义 一 组 样式 ， 实 现 多 个 页 面 一 同 
使 用 ， 从 而 得 到 同样 的 样式 效果 。 

CSS 提供 了 非常 丰富 的 样式 设置 ， 且 修改 方便 。CSS 的 一 个 重要 特性 就 是 层 倒 ， 层 
登 就 是 对 一 个 元 素 多 次 设置 同一 个 样式 ， 这 将 使 用 最 后 一 次 设置 的 属性 值 。 例 如 ， 对 一 
个 站 点 中 的 多 个 页 面 使 用 同一 套 CSS 样式 表 ， 而 某 些 页 面 中 的 某 些 元 素 想 使 用 其 他 样 
式 ， 就 可 以 针对 这 些 样 式 单独 定义 一 个 样式 表 并 应 用 到 页 面 中 。 这 些 后 来 定义 的 样式 将 
对 前 面 的 样式 设置 进行 重 写 ， 在 浏览 器 中 看 到 的 将 是 最 后 面 设置 的 样式 效果 。 

在 早期 的 用 HTML 定义 页 面 效果 的 网 站 中 ,往往 需要 大 量 或 重复 的 表格 和 font 元 素 ， 
以 形成 各 种 规格 的 文字 样式 ， 这 导致 HTML 页 面 中 产生 大 量 的 HTML 标签 ， 从 而 使 页 
面 文件 的 大 小 增加 。 而 将 样式 的 声明 单独 放 到 CSS 样式 表 中 , 可 以 大 大 减 小 页 面 的 体积 ， 
这 样 在 加 载 页 面 时 使 用 的 时 间 也 会 大 大 减少 。 另 外 ，CSS 样式 表 的 复 用 在 更 大 程度 上 缩 
减 了 页 面 的 体积 ， 减 少 下 载 时 间 。 在 HTML5 标准 中 ， 又 将 一 部 分 HTML 中 原 有 的 样式 
属性 转移 至 CSS 中 ， 由 此 可 以 看 出 ，CSS 在 页 面 样式 的 设计 中 越 来 越 重要 。 


3.1.2 在 Dreamweaver 中 使 用 CSS 



































Dreamweaver 从 一 开始 就 对 CSS 的 设计 和 使 用 提供 非常 方便 的 可 视 化 工具 ， 因 此 在 
Dreamweaver 中 进行 页 面 设计 非常 方便 和 直观 。 

Dreamweaver 提供 了 一 种 层 ， 也 叫 AP Div， 用 于 布局 ， 其 本 质 就 是 div 标记 ， 但 可 以 
通过 拖 放 和 绘制 的 方式 进行 页 面 的 设计 和 布局 ， 非 常 方便 ， 适 合 初 学 者 快速 掌握 CSS 这 
种 布局 方法 ， 也 为 进一步 使 用 CSS3 进行 设计 和 布局 提供 初步 基础 。 以 下 示例 通过 绘制 并 
设置 AP Div 实现 网 页 布局 效果 ， 为 便于 区 分 不 同 区 域 ， 对 每 一 个 AP Div 设置 背景 色 。 
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例 3.1: 在 Dreamweaver CS6 中 使 用 AP Div 进行 简单 的 布局 和 设计 
(1) 首先 切换 到 布局 工具 条 ， 单 击 “ 绘 制 AP Div” 图 标 ， 在 设计 区 域 绘制 一 个 矩形 ， 如 
3.1 所 示 。 
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图 3.1 绘制 APDiv 


(2) 按照 同样 的 方式 ， 参 照 图 3.2 绘制 其 他 几 个 AP Div， 只 需要 按照 基本 位 置 绘制 
即 可 ， 无 须 精确 绘制 。 
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图 3.2 初步 绘制 完成 的 布局 效果 
(3) 选中 apDiv1， 在 “属性 ”面板 中 设置 相关 参数 ，“ 左 ”为 0Opx，“ 上 ”为 0px， 
“ 宽 ” 为 480px，“ 高 ”为 80px，“ 颜 色 ” 为 #666666， 如 图 3.3 所 示 。 
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图 3.3 在 “属性 ”面板 中 设置 apDivl 的 参数 
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(4) 选中 apDiv2， 在 “属性 ”面板 中 设置 相关 参数 ，“ 左 ”为 Opx，“ 上 ”为 80px， 
“ 宽 ” 为 480px，“ 高 ”为 30px，“ 颜 色 ” 为 #999999; 选中 apDiv3， 设 置 相 关 参 数 ， 
“ 左 ” 为 0px, “上 ”为 110px, “ 宽 ” 为 120px, “高 ”为 220px, “颜色 ”为 #CCCCCC; 
选中 apDiv4， 设 置 相 关 参 数 ，“ 左 ”为 120px，“ 上 ”为 110px，“ 宽 ”为 360px，“ 高 ” 
为 220px，“ 颜 色 ” 为 #666666; 选中 apDiv5， 设 置 相关 参数 ，“ 左 ”为 0px，“ 上 ”为 
330px，“ 宽 ”为 480px，“ 高 ”为 70px，“ 颜 色 ” 为 #999999， 最 终 设置 如 图 3.4 所 示 ， 
在 浏览 器 中 的 预览 效果 如 图 3.5 所 示 。 
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图 3.4 设置 完成 的 效果 
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图 3.5 在 浏览 器 中 的 预览 效果 
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3.1.3 ”班级 网 站 首页 制作 


根据 第 1 章 中 对 班级 网 站 的 规划 和 设计 要 求 完成 以 下 案例 的 制作 ， 班 级 网 站 首页 完 
成 效果 如 图 3.6 所 示 。 在 此 案例 中 ， 依 然 沿用 apDiv 进行 设计 和 布局 ， 全 部 设置 也 都 在 
属性 面板 与 CSS 窗口 中 进行 设置 。 

例 3.2: 班级 网 站 首页 制作 


HR ri et 克服 团 古 、 芭 
力学 习 , 早日 完成 学 业 ， 为 续 校 争光 。 

童 起 ， 平 时 生活 中 是 一 个 活 法 开 骤 的 大 男 芒 ， 在 他 的 身边 后 是 有 那么 一 群 队 节 
谈心 [i 有 空 阳 时 问 他 不 是 


话语: 
力 , 就 尖 章 起 居然 看 到 我 人 湾 过 和 | 
了 这 次 机 会 。 在 ii 二 过 了 学 了 组 织 的 内面 中 地 成 功 入 图 。 





图 3.6 班级 网 站 首页 最 终 效果 
(1) 切换 至 “布局 ”工具 栏 ， 如 图 3.7 所 示 。 


DW 文件 (六 强 (E) 章 看 (V) 插入 (]) 修改 (M) 格式 (0) 命令 (C) 站 点 (S) ”窗口 (W) 帮助 (H) 
兴 用 而 局 | 表单 数据，Spry， jQuery Mobile IncontextEditing 文本 由 天 
[本 ] 扩 | 回 王 各 | 鲍 四 届 马 | 四 


3-1html* x 














图 3.7 切换 至 “布局 ”工具 栏 
(2) 在 “首选 参数 ”对 话 框 中 , 选中 “在 AP div 中 创建 以 后 嵌 套 ” 复 选 框 ， 如 图 3.8 所 示 。 
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图 3.8 设置 apDiv 嵌 套 








(3) 创建 apDivl 作为 底层 容器 , 其 他 的 apDiv 都 放置 在 该 容器 内 , 如 图 3.9 和 图 3.10 


。S56。 





所 示 ， 每 一 
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个 apDiv 的 具体 设置 可 参考 表 3.1 中 提供 的 数据 。 
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图 3.9 插入 底层 容器 apDiv1 





四 CE 
JUST ， 国王 色 | 册 加 巴里 











访 
| 


人 信 [07 | | 现 手 | 绚 基 性 所 名 0 二 证/ 洛 看 
op: one 
de: zazov | 





Sheigne, 110px; 
eine 2: 
el, 

加 /re | 
/nee 

人 

本 < 
四 








day doapDavd" 


av id 











DOE 4m #o 
ag 








appzvarys/aamy 
站” -cv 
appzv6ryehaamy 
a 
sy acpi 
pay 
a 
ody> 
et 
7 
< > 
站 本 Qing | ET 0 
se 一 一 
[orme]| ee 元 “| 红 | 元 一 有 四 
是 es mg) EE 了 全 多 | -9 iD 











CE 












































图 3.10 初步 完成 的 apDiv 布局 关系 


表 3.1 主要 布局 apDiv 参数 设置 表 
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修改 后 的 id 
apDiv6 | Left 0 


上 (px) 








apDiv7 Footer 0 68 4 











(4) 在 id 为 menu 的 层 中 输入 菜单 中 的 各 项 ， 将 其 设置 为 项 目 列表 ， 并 将 每 项 做 成 
超 链 接 ， 效 果 如 图 3.11 所 示 。 
(5) 将 光标 放 在 菜单 项 上 ， 单 击 右键 ， 在 弹出 的 菜单 中 选择 “CSS 样式 (C)” 然 后 单 





击 “ 新 建 (N)…” 选 项 ， 如 图 3.12 所 示 。 





WP) Gy 








[ve 





[EE 


图 3.11 制作 导航 菜单 项 图 3.12 添加 CSS 


(6) 在 弹出 的 对 话 框 中 将 选择 器 类 型 设置 为 “复合 内 容 (基于 选择 的 内 容 )”， 输 入 
“#menu ul” 作 为 选择 器 的 名 称 ， 将 规则 定义 设置 为 “( 仅 限 该 文档 )”， 如 图 3.13 所 示 ， 
单 击 “确定 ”按钮 。 

(7) 在 弹出 的 对 话 框 中 将 “类 型 ”的 “Line-height(D ”设置 为 33px， 如 图 3.14 所 示 。 
将 “ 方 框 ” 的 “Float(T)” 设 置 为 right， 将 “Margin” 的 “Right(G)” 设 置 为 10px， 如 图 
3.15 所 示 。“ 列 表 ” 中 的 设置 如 图 3.16 所 示 ， 单 击 “ 确 定 ” 按 钮 。 
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图 3.13 添加 样式 图 3.14 设置 行 高 
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#menu ul 的 CSS 规则 定义 x #meno ul 的 CSS 观 则 定义 x 
各 ji 球 


分 类 列 
2- 
| ， aa 加 有 me :Eee iso Fe 司 
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了 sdding Margin ist-s ositient linsi | 
辐 全 部 相同 (6) 口 全 部 相同 人 ) | 
be Top(r) ~ ro 四 "| 
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3.15 ”设置 Float 方 向 图 3.16 设置 列表 样式 



































































































































(8) 使 用 相同 的 方法 ， 参 照 图 3.17 一 图 3.19 设置 “#menu ulli”“#menuullia” 和 
































































































































有 Es 
“#menu ul li a:hover”， 完 成 设置 后 ， 导 航 效果 如 图 3.20 所 示 。 
#menu 路 的 555 规则 定义 x Wmenu dl lia 的 CSS 规则 十 义 X 
外 ee EE 
ida) "J ne re rarteilyO 可 “网 
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了 由 ttR ER id) : Text-deeoration(): 口 mteliaetul calerG) :rr 
otton EE oran| Dwelimto) 
Botton(l) tt) Mo 
LaktlL) ut 口 wm) 
[El 
CICw Ba 区 .到 | CE jw Ral 
图 3.17 设置 #menu ul li 的 Float 方向 3.18 设置 pmenuullia 
meny ul ashover 的 CSS 规则 定义 x 
和 sa 
eat-ewilyt) 
Pont-sizels): -| eit) 
前 Pont-etylelT): ~| Pant—erient(V) :| 
于 Uine-heieht (I) ~ Text-eranstfon(n) ~ 
Treerdomstiml): Ondalinet) olio) rm | 
Doreline(O) 
nethronght) 
Jblizk th) 
口 -的 
区 .0 到 Cu | ER 




















图 3.19 设置 #menu ul lia: hover 


下 页 ”校园 押 闻 校园 风光 六 航 相 册 个 性 展现 ”和 铸 言 





图 3.20 设置 完成 的 导航 效果 
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(9) 在 id 为 banner 的 <apviv> 中 插入 图 片 (文件 名 为 bannerjpg), 效果 如 图 3.21 所 示 。 
i 





赎 PT 


GED 3 


图 3.21 添加 banner 图 片 


(10) 在 id 为 left 的 apDiv 中 添加 三 个 apDiv， 将 其 中 一 个 作为 容器 ， 用 于 放置 另外 
两 个 apDiv。 在 以 上 两 个 apDiv 的 上 方 创 建 另 外 两 个 小 的 apDiv， 用 于 显示 标题 ， 并 在 响 
应 位 置 输入 相应 的 文字 ， 将 目录 部 分 设置 成 项 目 列表 ， 如 图 3.22 所 示 。 

(11) 创建 contentlist 类 ， 在 新 建 CSS 规则 时 设置 “选择 器 类 型 ”为 “类 ”、 选 择 器 
名 称 为 “contentlist”， 将 “选择 定义 规则 的 位 置 ” 设 置 为 “( 仅 限 该 文档 }”， 如 图 3.23 
所 示 ， 然 后 单 击 “ 确 定 ” 按 钮 。 


新建 CSS 项 则 x 
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图 3.22 设置 内 部 布局 图 3.23 创建 contentlist 类 


(12) 在 CSS 规则 定义 窗口 的 “类 型 "分 类 中 设置 字体 为 “宋体 ”、 字 体 大 小 为 “14px”、 
行 高 为 “18px”、 颜 色 为 “#333”、 文 字 装 饰 (Text-decoration) 为 “none”， 如 图 3.24 所 
示 。 在 “ 方 框 ”分 类 中 将 “Padding” 设 置 “2px”， 将 “Margin” 设 置 为 “3px”， 如 图 
3.25 所 示 。 在 “列表 ”分 类 中 设置 “List-style-type(T) ”为 “none”, 设置 “List-style-Position(p)” 
为 “outside”， 如 图 3.26 所 示 。 
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图 3.24 设置 contentlist 类 的 类 型 图 3.25 设置 contentlist 类 的 方 框 
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contentlist 的 CSS 规则 走 义 x 
分 类 了 





Listrsele-eme(D)- use “| 


UststleisceD:[ “| 


List-style-Position(p): [outside 


才 助 00 [mE ] 了 参 应 用 只) 
图 3.26 设置 contentlist 类 的 列表 

(13) 添加 right title 类 ， 在 “类 型 ”分 类 中 设置 字体 为 “16px”、 行 高 为 “25px”、 
加 粗 为 “bolder”、 字 体 颜 色 为 “十 FF”， 如 图 3.27 所 示 。 在 “背景 ”分 类 中 设置 背景 
颜色 为 “#93A8FF”， 如 图 3.28 所 示 。 














"ighttite 的 CSS 规划 定义 x ,ight tide 的 CSS 规则 定义 x 
分 类 下 型 分 天 | 
0 | 
? ire Ban |] 下 
口 ED) 
Oui) 
Dome) 
ET CC 要 菇 ER | 0 | mm 2 RY 
图 3.27 设置 right_title 类 的 类 型 图 3.28 设置 right_title 类 的 背景 


在 “区 块 ” 分 类 中 设置 文字 对 齐 为 “center”( 居 中 对 齐 方式 )， 如 图 3.29 所 示 。 在 “ 方 
框 ” 分 类 中 设置 高 度 为 “25px”， 如 图 3.30 所 示 。 



















































































,ght title 的 C5S 规划 定义 x .fight tile 的 C5S 规则 定义 x 
分 类 区 由 2 | 东 晤 
| ie | 
Backeromdmositicn 人 v] 国 
WO CJ] 歼 内 | Tm CC 要 随 应 及 
图 3.29 设置 tight_title 类 的 对 齐 方 式 图 3.30 设置 right title 类 的 高 度 


(14) 选中 “班级 要 闻 ” 和 “通知 通告 ”的 apDiv， 将 其 设置 为 “right title”。 选 中 
下 面 对 应 的 apDiv， 输 入 相应 文字 ， 并 将 其 设置 为 “contentlist”， 效 果 如 图 3.22 所 示 。 

(15) 在 id 为 “right” 的 apDiv 内 添加 两 个 apDiv， 上 面 的 id 为 “album”， 并 插入 
图 片 ， 下 面 的 id 为 “list”， 在 其 中 输入 相应 文字 ， 将 列表 文字 设置 为 超 链接 ， 效 果 如 
图 3.32 所 示 。 
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桃李 芬芳 一 工 院 学 子 风采 录 开学 通知 

那 一 抹 属 于 自己 的 美丽 访 国家 励志 奖 ... 上 课 通 知 

助 学 " 铸 人 征文 一 等 奖 讲 .… 缴纳 学 费 通知 

访 赴 台 湾 科技 大 学 进修 章 超 同 学 . . 期 未 考试 通知 
我 们 的 大 学 希望 的 起 点 一 一 访 仇家 .. 英 困 补助 申请 通知 





图 3.31 设置 后 的 效果 图 3.32 右 侧 栏目 
(16) 为 id 为 “album” 的 apDiv 创建 CSS 规则 ,将 宽 和 高 分 别 设置 为 “205px” 和 
“90px”， 将 四 边 的 Padding 和 Margin 分 别 设置 为 “5px” 和 “10px”， 如 图 3.33 所 
示 。 在 “边框 ”分 类 中 设置 边框 的 样式 为 “solid”、 宽 度 为 “lpx”、 边 框 颜色 为 “#096”， 
如 图 3.34 所 示 。 
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图 3.33 设置 album 的 方 杠 图 3.34 设置 album 的 边框 


(17) 设置 id 为 “list” 的 apDiv 的 CSS 样式 规则 ， 将 宽 和 高 分 别 设置 为 “237px” 和 
“216px”， 如 图 3.35 所 示 。 
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图 3.35 list 的 样式 设置 
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(18) 设置 right title 类 的 CSS 样式 ， 在 “类 型 ”分 类 中 设置 字体 大 小 为 “16px”、 
行 高 为 “2Spx”、 加 粗 为 “border”、 字 体 颜 色 为 “ 手 FF”， 如 图 3.36 所 示 。 在 图 3.37 
所 示 的 背景 设置 中 将 “背景 ”分 类 中 将 背景 色 置 为 “#93A8FF”。 在 图 3.38 中 将 对 齐 方 
式 设置 为 “center”。 在 “ 方 框 ” 分 类 中 将 高 度 设置 为 “25px”， 如 图 3.39 所 示 。 
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图 337 设置 right title 类 的 背景 





.right_title 的 CSS 规则 定义 x .fight_ttle 的 CSS 规则 主义 x 
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图 3.38 设置 rfight_title 类 的 区 块 图 3.39 设置 right title 类 的 方 框 


(19) 设置 list ul 的 CSS 样式 , 在 “ 方 框 ” 分 类 中 设置 Padding 为 “5px”， 如 图 3.40 
所 示 。 在 “列表 ”分 类 中 将 “List-style-type(T)” 设 置 为 “none”， 如 图 3.41 所 示 。 















































fet ul 的 CSS 规则 定义 x cl 的 CSS 规则 去 久 家 
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beltt) : 6 ee 区 
天 助 0 [ 了 省 “| [十 呈 部 动 90 Cj] 芒 | 证 王 
图 3.40 设置 list ul 的 方 框 图 3.41 设置 listul 的 列表 


(20) 设置 listulli 的 CSS 样式 ,在 “ 方 框 ? 分 类 中 设置 Padding 的 Bottom 和 Left 为 "4px” 
和 “10px”， 设置 Margin 的 Bottom 为 “4px”， 如 图 3.42 所 示 。 在 “边框 ”分 类 中 将 Style 
的 Bottom 设置 为 “dashed”， 将 宽度 设置 为 “lpx”， 将 颜色 设置 为 “#66666”， 如 图 3.43 
所 示 。 
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图 3.42 设置 listulli 的 方 框 3.43 设置 listulli 的 边框 


(21) 设置 list ul li a 的 CSS 样式 ， 在 “类 型 ”分 类 中 设置 字体 大 小 为 “12px”、 颜 
色 为 “#333”， 如 图 3.44 所 示 。 
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图 3.44 设置 listullia 的 方 框 


3.2 CSS 的 构成 


CSS3 的 主要 内 容 被 划分 为 模块 ， 主 要 的 CSS3 模块 包括 : 选择 器 、 杠 模型、 背景 和 
边框 、 文 本 效果 、2D/3D 转换 、 动 画 、 多 列 布局 、 用 户 界 面 等 。 


3.2.1 CSS 中 的 模块 








在 Dreamweaver 中 可 以 通过 图 形 界面 设置 CSS 样式 , 页 中 的 元 素 进行 修饰 , 设置 的 
过 程 实际 是 将 CSS 样式 信息 写 到 HTML 文件 或 CSS 文件 中 。 在 上 一 节 的 示例 中 ， 通 过 
Dreamweaver 设置 的 各 种 样式 信息 存储 在 HTML 文件 中 ， 样 式 如 下 : 
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可 以 看 到 ,在 HTML 文件 中 ,CSS 的 描述 信息 存放 在 <style type="text/css"> 和 </style> 
标签 之 间 ， 而 <style> 标 签 又 必须 放置 在 <head> 和 </head> 标 签 之 间 。 

CSS 中 对 各 种 特征 的 定义 是 通过 属性 和 属性 值 的 方式 表述 的 ， 如 “width: 200px;” 
表示 宽度 为 200px。 在 CSS 中 ， 属 性 的 名 字 是 合法 的 标识 符 ， 它 们 是 CSS 语法 中 的 关键 
字 。 一 种 属性 规定 了 格式 修饰 的 一 个 方面 。 例如 : color 是 文本 的 颜色 属性 , 而 text-indent 
则 规定 了 段落 的 缩 进 。 属 性 一 般 都 有 属性 值 ， 且 属性 值 与 属性 相对 应 ， 如 color 属性 值 
是 表示 颜色 值 的 数值 。 属 性 可 以 适用 于 某 些 元 素 ， 或 被 下 一 级 继承 。 

上 面 示例 中 的 CSS 属性 信息 仅 对 该 HTML 文件 有 效 , 其 他 文件 不 能 共享 使 用 。CSS 
文件 用 于 专门 存储 CSS 的 属性 与 属性 值 ， 使 用 属性 文件 的 最 大 好 处 在 于 ， 可 以 有 多 个 
HTML 文件 共用 CSS 文件 中 的 属性 设置 信息 。 

例 3.3: 在 Dreamweaver 中 创建 和 使 用 CSS 文件 

(1) 首先 创建 HTML 文件 ， 在 页 面 上 输入 三 行文 字 ， 如 图 3.45 所 示 。 
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3.45 创建 HTML 文件 
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(2) 在 “文件 ”菜单 中 选择 “新 建 ”， 打 开 “ 新 建文 档 ” 对 话 框 ， 选 择 页 面 类 型 为 
“CSS” 以 创建 CSS 文档 ， 如 图 3.46 所 示 ， 将 其 保存 为 “3-3.css” 并 编辑 ， 如 图 3.47 和 


3.48 所 示 。 
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3.46 新建 CSS 文件 


3.47 保存 CSS 文件 
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3.48 编辑 CSS 文件 
(3) 返 





回 刚才 创建 的 HIML 文件 ， 在 “CSS 样式 ”面板 中 单 击 “ 附 加 样式 表 ” 按 钮 ， 


如 图 3.49 所 示 。 在 弹出 的 “链接 外 部 样式 表 ” 对 话 框 中 通过 “浏览 ”按钮 ， 将 刚才 创建 


的 “3-3.css” 文 件 选中 ， 添 加 方式 为 “链接 ”， 如 图 3.50 


所 示 。 
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图 3.49 添加 附加 样式 表 
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图 3.50 选择 链接 外 部 样式 表 文件 


(4) 在 HIML 文件 中 新 建 CSS 规则 ,选择 器 类 型 为 < 类 (可 应 用 于 任何 HTML 元 素 )”， 
选择 器 名 称 为 “titel_class”， 选 择 定义 规则 的 位 置 为 “3-3.css”， 如 图 3.51 所 示 。 


| 新建 CS5 规则 


和 拉夫 型: 
为 css MD 过 悍 上下文 过 反 吕 内 型 。 
闪避 应 用 于 任何 Im 元 于 
选民 器 名 称 - 
和 或 机 入 造反 中 名 各 ~ 
[Ee 


EE me 











不 上 村 更 内 入 


图 3.51 创建 类 
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(5) 在 CSS 规则 定义 对 话 框 中 ， 在 “类 型 ”分 类 中 设置 “Font-family(F)” 为 “微软 
雅 黑 ”、“Font-size(S)” 为 “18px”、“Line-height(T)” 为 “24px”、“Font-weight(V)” 


为 “bolder”、“Color”(C) 为 “#00”， 如 图 3.52 所 示 。 































































































,titel_class 的 CSS 规则 定义 (在 3-3.css 中 ) x 
分 类 类 型 
Pont-fanily(F) : [向 软 雅 黑 ~ 次 | 
Tont-size(s): [18 vl w) Fontweight(W):lbolder ~ 
几 了 ont-style(T) ~ Font—variant(y) ~ 
于 Line-height(1): [24 ~|lpx VText-transforn(B); ~ 
Text-decoration(D): Dunderline(V) Color{c) 4#F00 
口 wverline(o) 
line-through(L) 
blink(B) 
口 aone0nD 
| 寺 动 00 | 评 用 人 N 
图 3.52 为 titel_class 类 设置 样式 
(6) 使 用 同样 的 方法 ， 创 建 content_class 和 link class， 有 具体 参数 如 图 3.53 和 图 3.54 





所 示 。 
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content dacs 的 CSS 规则 定义 (在 3-3css 中 ] X | [kaas< 的 CssjRIEX (在 33cce 中 ) x 
分 类 EE 人 经 
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图 3.53 为 content_class 类 设置 样式 3.54 ”为 link_class 类 设置 样式 


(7) 回 到 设计 视图 后 ， 选 中 “文本 样式 一 ”并 在 “属性 ”面板 的 “类 ”下 拉 列 表 框 
中 选中 “titel_class”， 如 图 3.55 所 示 。 设 置 “ 文 本 样式 二 ”为 “content_class”， 设 置 
“文本 样式 三 ”为 “link class”， 设 置 完 样式 后 的 效果 如 图 3.56 所 示 。 
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图 3.55 为 文字 设置 相应 的 类 
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图 3.56 设置 完 样式 后 的 效果 
最 终 完 成 的 3-3.css 文件 的 内 容 如 图 3.57 所 示 。 
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‘Citel class { 
font-family: "微软 雅 黑 "; 
font-size: 18px; 





EE 


font-size: 10px; 
line-height: 14px; 
color: #666; 
text-decoration: none; 
font-weight: bolder; 
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fcnc-family: "宋体 ": 
font-size: 12px; 
line-height: 16px; 
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3.57 CSS 样式 文件 的 内 容 


在 设计 和 制作 网 站 的 时 候 ， 根 据 需 要 设计 好 CSS 样式 文件 。 在 设计 和 制作 网 页 的 时 
候 ， 直 接 引用 CSS 样式 文件 ， 并 且 可 以 对 样式 进行 重合 应 用 ,便于 网 站 风格 的 整体 统一 
和 不 同 频 道 的 风格 变化 。 

上 面 的 示例 通过 Dreamweaver 可 视 化 界面 引用 和 设置 CSS 样式 , 其 实 可 以 通过 直接 
编辑 HTML 代码 和 CSS 代码 进行 网 页 制作 。 在 HTML 文件 中 导入 CSS 样式 文件 ， 需 要 
在 <head> 标 签 里 使 用 <link> 标 签 引 用 指定 的 CSS 样式 文件 ， 代 码 如 下 : 


href 属性 的 值 为 需要 链接 的 CSS 样式 文件 , rel 属性 表示 引用 的 样式 表 , type 属性 表 
示 被 链接 的 文件 为 CSS 文本 类 型 。 

上 述 示 例 中 只 用 到 Dreamweaver 在 CSS 设置 中 的 部 分 界面 和 功能 ， 以 下 介绍 
Dreamweaver 中 CSS 设置 界面 的 其 他 内 容 。 

(1)“ 类 型 ”分 类 设置 对 话 框 

在 “类 型 ”分 类 设置 对 话 框 中 ， 主 要 用 于 设置 与 文字 相关 的 样式 ， 如 图 3.58 所 示 。 
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图 3.58 “类 型 ”分 类 设置 对 话 框 
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Font-family: 用 于 设置 文本 所 使 用 的 字体 ， 可 以 是 英文 字体 ， 也 可 以 是 中 文字 体 。 
通常 可 以 设置 成 字体 列表 ， 如 “仿宋 ; 宋体 ”， 当 第 一 种 字体 在 客户 端 不 存在 时 ， 会 寻 
找 后 面 的 字体 作为 在 浏览 器 中 显示 的 字体 。 因 此 ， 在 该 字体 列表 中 ， 会 尽量 选取 显示 效 
果 接 近 的 字体 。 

Font-size: 用 于 设置 字体 大 小 ， 默 认 以 px 为 字体 大 小 的 单位 ， 也 可 以 采用 pt、in、 
cm、mm 等 设置 大 小 。 可 以 通过 xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large 
等 固定 值 设置 字体 大 小 ,还 可 以 用 %、smaller、larger 等 把 字体 大 小 设置 为 父 元 素 字体 的 
相对 值 。 

Font-style: 用 于 设置 使 用 斜体 、 倾 斜 或 正常 字体 。 斜 体 字 体 通 常 定 义 为 字体 系列 中 
一 个 单独 的 字体 。 其 中 normal 为 标准 的 字体 样式 (默认 值 )，italic 为 斜体 的 字体 样式 ， 
oblique 为 倾斜 的 字体 样式 ，inherit 为 从 父 元 素 继承 的 字体 样式 。 

Font-weight: 用 于 设置 文本 的 粗细 。 可 以 用 normal( 默 认 值 ) 定 义 标准 的 字符 , 用 bold 
定义 粗 体 字符 ， 用 bolder 定义 更 粗 的 字符 ， 用 lighter 定义 更 细 的 字符 。 也 可 以 用 数字 定 
义 100 至 900， 其 中 数字 400 等 价 于 normal，700 等 价 于 bold。 

Font-variant: 用 于 设置 小 型 大 写字 母 的 字体 显示 文本 ， 换 言 之 ， 所 有 的 小 写字 母 均 
会 被 转换 为 大 写 , 但 是 所 有 使 用 小 型 大 写字 体 的 字母 与 其 余 文 本 相 比 , 其 字体 尺寸 更 小 。 
此 属性 只 针对 英文 有 效 ， 对 中 文 无 效 。 

Line-height: 用 于 设置 行 间 的 距离 ， 也 叫 行 高 。 可 以 通过 数值 设 定 行 高 的 具体 数值 ， 
如 24px; 也 可 以 采用 % 设 置 为 标准 行 高 的 相对 高 度 ， 如 150% 对 应 于 1.5 倍 行距 。 

Text-transform: 用 于 控制 文本 的 大 小 写 ， 也 仅 对 英文 有 效 ， 对 中 文 无 效 。 

Text-decoration: 用 于 设置 文本 的 装饰 效果 。none 为 默认 值 ， 定 义 标准 的 文本 ， 
underline 定义 文本 下 的 一 条 线 ，overline 定义 文本 上 的 一 条 线 ，line-through 定义 穿 过 文 
本 的 一 条 线 ，blink 定义 闪烁 的 文本 。 

Color: 用 于 设置 文本 颜色 ， 通常 采 用 十 六 进 制 数 表示 颜色 ， 如 #F0000。 

(2) “背景 ”分 类 设置 对 话 框 

在 “背景 ” 分 类 设置 对 话 框 中 ,主要 设置 页 面 背 景 或 div 背景 信息 ， 如 图 3.59 所 示 。 

Background-color: 设置 背景 颜色 ， 用 法 与 Color 属性 一 致 。 

Background-image: 用 于 设置 背景 图 像 ， 默 认 是 “none”， 即 没有 背景 图 片 。 如 果 
需要 添加 背景 图 片 ， 可 以 通过 右 侧 的 “浏览 ”按钮 添加 背景 图 片 信息 。 

Background-repeat: 用 于 定义 背景 图 片 的 排列 方式 ， 此 属性 必须 在 添加 背景 图 片 以 
后 才 会 对 背景 图 片 产生 影响 。Background-repeat 属性 有 四 个 值 ， 当 值 为 repeat 时， 背景 
图 片 会 在 区 域 (可 能 是 整个 页 面 ， 也 可 能 是 一 个 区 域 ， 根 据 实际 定义 的 对 象 而 定 ) 内 平 铺 
填充 ， 形 成 类 似 地 砖 的 效果 ; no-repeat 表示 不 重复 排列 ， 只 显示 一 张 背 景 图 片 ; repeat-x 
表示 图 片 只 沿 横向 铺 排 ，repeat-y 表示 图 片 只 沿 纵 向 铺 排 。 

Background-attachment: 用 于 设置 背景 图 片 的 位 置 是 否 固定 ， 当 值 为 “fixed” 时 ， 
表示 背景 图 片 为 固定 ; 当 值 为 “scroll” 时 ， 表 示 背 景 图 片 随 着 页 面 的 滚动 一 起 滚动 。 

Background-position: 有 两 个 属性 X 和 Y)， 用 于 定义 背景 图 片 的 位 置 ，X 的 取 值 可 
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以 是 left、right 和 center，Y 的 取 值 可 以 是 ttp、center 和 bottom， 这 两 个 属性 也 可 以 直 





接 定义 具体 的 坐标 值 。 
.Simple 的 CSS 规则 定义 x 
分 类 背景 
类 
Background-color (C) 辐 ] 
Background-inage(I) ~| | 济 晤 
Backgr ound-repeat (BR) 加 | 
过 得 Backgr ound-attachnent (T) ~| 
Background-position (X): [ ~| 属 
Background-position (1):[ | 压 
必 助 00 取消 应 用 只 


图 3.59 “背景 ”分 类 设置 对 话 杠 


(3) “区 块 ”分 类 设置 对 话 杠 

该 对 话 框 里 的 属性 主要 用 于 设置 区 块 内 文字 的 对 齐 排列 特性 ， 如 图 3.60 所 示 。 

Word-spacing: 用 于 定义 单词 之 间 的 间距 。 

Letter-spacing: 用 于 定义 字母 之 间 的 间距 。 

Vertical-align: 用 于 纵向 对 齐 方 式 ， 该 属性 可 取 的 值 较 多 。 

Text-align: 用 于 定义 水 平方 向 对 齐 方式 ，left、right、center 和 justify 分 别 表示 左 对 
齐 、 右 对 齐 、 居 中 对 齐 和 两 端 对 齐 。 

Text-indent: 用 于 定义 文本 缩 进位 置 。 

White-space: 用 于 定义 文本 内 空白 区 域 的 处 理 方式 , 默认 状态 下 同 HTML 一 样 会 忽 
略 空格 或 空 行 。 

Display: 用 于 定义 建立 布局 时 元 素 生 成 的 显示 框 类 型 。 此 属性 可 取 的 值 较 多 ， 但 常 
用 值 主要 是 none、block、inline 和 inline-block( 参 见 表 3.2)， 在 CSS3 版 本 中 还 有 flex， 
此 属性 将 在 后 面 介绍 。 














表 3.2 Display 属性 的 常用 值 











属性 值 说 明 
Done | 此 元 素 不 会 被 显示 

block | “此 元 素 将 显示 为 块 级 元 素 ， 此 元 素 前 后 会 带 有 换行 符 
inline | 默认 。 此 元 素 会 被 显示 为 内 联 元 素 ， 元 素 前 后 没有 换行 符 





inline-block 行内 块 元 素 

Display 属性 本 质 上 用 于 设置 元 素 为 内 联 元 素 还 是 块 级 元 素 , 内 联 元 素 的 特点 是 : 该 
元 素 和 其 他 元 素 都 在 一 行 上 ， 元 素 的 高 度 、 宽 度 及 顶部 和 底部 边 距 不 可 设置 ;元 素 的 宽 
度 就 是 它 包 含 的 文字 或 图 片 的 宽度 ， 不 可 改变 。 内 联 元 素 主要 有 <a>、<span>、<br>、 
<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 等 。 


块 级 元 素 的 特点 是 : 每 个 块 级 元 素 都 从 新 的 一 行 开始 , 并 且 其 后 的 元 素 也 另 起 一 行 ， 
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元 素 的 高 度 、 宽 度 、 行 高 以 及 项 边 距 和 底 边 距 都 可 设置 ， 元 素 宽度 在 不 设置 的 情况 下 ， 
将 会 继承 其 父 容器 的 宽度 。 常用 的 块 状元 素 有 <div>、<p>、<h1><h6>、<ol>、<ul>、<dl>、 
<table>、<address>、<blockquote>、<form> 等 。 
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图 3.60 “区 块 ”分 类 设置 对 话 框 

(4) “ 方 框 ”分 类 设置 对 话 框 

主要 针对 块 级 元 素 设置 其 宽度 、 高 度 、 元 素 浮动 特性 、 内 外 间距 等 ， 如 图 3.61 所 示 。 

Width: 用 于 设置 元 素 的 宽度 。 

Height: 用 于 设置 元 素 的 高 度 。 

Float: 用 于 设置 元 素 的 浮动 。Float 属性 定义 元 素 在 哪个 方向 浮动 ;left 表示 元 素 向 
左 浮动 ; right 表示 元 素 向 右 浮动 , none 为 默认 值 ， 元 素 不 浮动 ， 并 且 会 显示 其 在 文本 中 
出 现 的 位 置 ，inherit 规定 从 父 元 素 继承 float 属性 的 值 。 

Clear: 用 于 指定 在 段落 的 左 侧 或 右 侧 不 允许 浮动 的 元 素 。 可 取 值 为 :left 表示 在 左 
侧 不 允许 浮动 元 素 ; right 表示 在 右 侧 不 允许 浮动 元 素 ; both 表示 在 左右 两 侧 均 不 允许 浮 
动 元 素 ; none 为 默认 值 ， 允 许 浮动 元 素 出 现在 两 侧 。 

Padding: 用 于 指定 元 素 的 内 部 间距 。 

Margin: 用 于 指定 元 素 的 外 部 边 距 。 

在 定义 Padding 和 Margin 时 ， 这 两 个 属性 都 具有 四 个 方向 ， 因 此 可 以 单独 定义 其 中 
任何 一 个 方向 的 间距 。 
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图 3.61 “ 方 框 ”分 类 设置 对 话 框 
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(5) “边框 ”分 类 设置 对 话 框 

在 “边框 ”分 类 设置 对 话 框 (如 图 3.62 所 示 ) 中 可 以 设置 元 素 边框 的 样式 、 粗细 和 颜色 。 

Style: 定义 边框 的 样式 ， 默 认为 none， 表示 没有 边框 。 常 用 的 属性 值 有 dotted( 点 状 
边框 ， 在 有 些 浏览 器 中 可 能 显示 为 实 线 )、dashed( 虚 线 )、solid( 实 线 ) 和 double( 双 线 )。 

Width: 用 于 定义 边框 的 宽度 ， 对 于 边框 的 宽度 ， 可 以 采用 thin、medium、thick 来 
定义 宽度 ， 也 可 以 直接 用 数值 定义 。 

Color: 定义 边框 的 颜色 。 

在 定义 边框 时 ， 可 以 一 次 性 定义 四 条 边 的 参数 ， 也 可 以 只 定义 其 中 部 分 边 。Top 为 
顶部 的 边 ，Right 为 右 侧 的 边 ，Bottom 为 底部 的 边 ，Left 为 左 侧 的 边 。 
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图 3.62 “边框 ”分 类 设置 对 话 框 

(6) “列表 ”分 类 设置 对 话 框 

“列表 ”分 类 设置 对 话 框 (如 图 3.63 所 示 ) 用 于 定义 和 设置 与 列表 (项 目 列表 和 编号 列 
表 ) 相 关 的 特征 。 

List-style-type: 用 于 设置 列表 项 标记 的 类 型 。 该 属性 的 默认 值 是 disc， 实 际 显示 为 
实心 圆 ，none 为 无 标记 ，circle 为 空心 圆 标记 ，square 为 实心 方块 ，decimal 为 数字 等 。 
除了 这 些 常用 样式 ， 还 可 以 设置 为 以 英文 字母 、 罗 马 数 字 或 希腊 字母 等 为 标记 的 样式 。 

List-style-Position: 用 于 设置 在 何 处 放置 列表 项 标记 。 默 认 值 为 outside， 表 示 保 持 
标记 位 于 文本 的 左 侧 ， 将 列表 项 标记 放置 在 文本 以 外 ， 且 环绕 的 文本 不 根据 标记 对 齐 。 
当 值 为 inside 时 ， 将 列表 项 标记 放置 在 文本 以 内 ， 且 环绕 的 文本 根据 标记 对 齐 。 

List-style-image: 用 于 设置 使 用 图 像 来 蔡 换 列表 项 标记 ， 其 值 为 图 像 的 URL。 
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图 3.63 “列表 ”分 类 设置 对 话 框 
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(7) “定位 ”分 类 设置 对 话 框 

“定位 ”分 类 设置 对 话 框 (如 图 3.64 所 示 ) 主 要 用 于 定义 元 素 的 位 置 ， 在 该 对 话 框 中 
有 些 属 性 与 “ 方 框 ” 分 类 设置 对 话 框 中 的 参数 相同 (如 Width 和 Height)。 

Position: 用 于 定义 元 素 的 定位 类 型 。 该 属性 有 四 个 值 : static 为 默认 值 ， 即 没有 定 
位 ， 元 素 出 现在 正常 的 流 中 ， 静 态 定位 的 元 素 不 会 受到 top、bottom、left、right 的 影响 ; 
fixed 定义 元 素 的 位 置 相 对 于 浏览 器 窗口 是 固定 位 置 ， 即 使 窗口 是 滚动 的 ， 也 不 会 移动 ; 
relative 定义 相对 定位 的 元 素 ， 其 定位 是 相对 其 正常 位 置 ，absolute 用 于 定义 绝对 定位 的 
元 素 ， 其 位 置 相对 于 最 近 的 已 定位 父 元 素 ， 如 果 元 素 没有 已 定位 的 父 元 素 ， 那 么 它 的 位 
置 相对 于 <html>。 

Visibility: 用 于 指定 一 个 元 素 是 否 可 见 ， 值 为 visible 时 表示 可 见 ， 值 为 hidden 时 表 
示 不 可 见 。 即 便 设置 为 不 见 时 ， 元 素 也 会 占据 页 面 上 的 空间 。 

Z-Index: 用 于 指定 元 素 的 堆 芭 顺序， 数值 小 的 排 在 下 面 ， 数 值 大 的 排 在 上 面 。 

Overflow: 用 于 指定 内 容 溢出 元 素 区 域 时 的 处 理 方式 。 当 值 为 visible( 默 认 值 ) 时 内 容 
不 会 被 修剪， 内 容 会 溢出 到 元 素 区 域 之 外 。 当 值 为 hidden 时 ， 内 容 会 被 修剪 ， 并 且 不 会 
显示 。 当 值 为 scroll 时 ， 内 容 会 被 修剪 ， 并 且 可 以 通过 滚动 条 查看 其 余 的 内 容 ; 当 值 为 
auto 时 ， 如 果 内 容 被 修剪 ， 浏 览 器 会 显示 滚动 条 以 便 查看 其 余 的 内 容 。 

Clip: 用 于 指定 图 像 被 剪裁 的 方式 , 如 果 图 像 大 于 包含 它 的 元 素 , 根据 设置 的 Top、 left、 
Bottom 和 Right 的 值 进行 修剪 。 如 果 Overflow 已 经 设置 为 visible，Clip 属性 不 起 作用 。 

Top、left、Bottom 和 Right 四 个 属性 用 于 设置 元 素 的 位 置 ， 如 果 Position 属性 的 值 
为 static，Top 等 属性 不 会 产生 任何 效果 。 

(8) “扩展 ”分 类 设置 对 话 框 

“扩展 ”分 类 设置 对 话 框 (如 图 3.65 所 示 ) 主 要 用 于 分 页 行为 和 鼠标 的 视觉 效果 等 ， 
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(9) “过 渡 ” 分 类 设置 对 话 框 
“过 渡 ” 分 类 设置 对 话 框 (如 图 3.66 所 示 ) 主 要 用 于 设置 CSS 动画 效果 。 
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图 3.66 “过渡” 分 类 设置 对 话 框 





3.2.2 CSS 选择 器 


在 CSS 以 前 的 版 本 中 就 已 经 有 选择 器 的 概念 ,选择 器 是 一 种 模式 ， 用 于 选择 需要 添 
加 样式 的 元 素 。 


1. class 


class 也 叫 伪 类 ， 是 最 为 常用 的 一 种 选择 器 。 通 常 ， 伪 类 通过 定义 各 种 样式 后 ， 在 
HTML 的 元 素 中 引用 伪 类 ， 就 可 以 将 定义 好 的 样式 赋 给 任何 一 个 引用 伪 类 的 元 素 。 假 如 
定义 了 一 个 名 为 “b title” 的 伪 类 ， 那 么 在 元 素 中 引用 的 时 候 可 以 这 样 使 用 : 

<p class="b_title">，<div class="b_title"> 

2. #id 


选择 所 有 以 某 个 id 命名 的 元 素 ， 当 对 这 个 id 设置 了 一 种 样式 后 ， 在 页 面 上 所 有 以 
这 个 id 命名 的 元 素 都 会 按照 该 样式 显示 。 假如 已 经 为 id 为 “page_x” 的 元 素 定 义 了 一 种 
样式 ， 相 应 地 ， 页 面 上 所 有 id=" page_x "的 元 素 都 会 显示 相同 的 样式 。 

3. 元 素 


CSS 可 以 针对 HTML 元 素 进行 设置 ， 相 应 页 面 中 所 有 该 元 素 的 样式 都 会 发 生变 化 。 
假如 将 <p> 元 素 的 字体 颜色 设置 为 红色 , 那么 对 应 页 面 上 所 有 <p> 标 记 中 的 字体 都 会 默认 
为 红色 。 

元 素 的 选择 较为 复杂 ， 除 了 对 单一 元 素 可 以 进行 选择 以 外 ， 还 可 以 对 多 个 元 素 或 具 
有 父子 关系 的 元 素 进行 选择 。 

div,p: 表示 选择 所 有 <div> 元 素 和 <p> 元 素 。 

div p: 表示 选择 <div> 元 素 内 部 的 所 有 <p> 元 素 。 

div>p: 表示 选择 父 元 素 为 <div> 元 素 的 所 有 <p> 元 素 。 

div+p: 表示 选择 紧 跟 在 <div> 元 素 之 后 的 所 有 <p> 元 素 。 

4. 属性 


属性 也 是 CSS 中 常用 的 选择 依据 ,不 仅 可 以 根据 属性 的 名 称 选 择 , 还 可 以 根据 属性 
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和 属性 值 选择 ， 如 [target] 表 示 选 择 带 有 target 属性 的 所 有 元 素 ; [target=_blank] 表 示 选 择 
target=" blank" 的 所 有 元 素 ; [title=flower] 表 示 选 择 title 属性 包含 单词 "flower" 的 所 有 元 
素 ; [lang|=en] 表 示 选 择 lang 属性 值 以 "en" 开 头 的 所 有 元 素 。 

5. 超 链接 

超 链接 作为 HTML 中 最 为 重要 的 元 素 ， 也 可 以 进行 特定 的 选择 。a:link 表示 选择 所 
有 未 被 访问 的 链接 ; a:visited 表示 选择 所 有 已 被 访问 的 链接 ; aactive 表示 选择 活动 链接 ; 
ahover 表示 选择 光标 位 于 其 上 的 链接 。 
3.2.3 ”使 模 型 

1. 传统 盒 模型 

在 CSS 中 ，“ 盒 模型 ”用 于 在 HTML 中 进行 设计 和 布局 ， 可 以 应 用 于 所 有 HTML 
元 素 。CSS 盒 模 型 可 以 理解 为 将 HTML 元 素 分 层 包 围 起 来 ， 从 内 到 外 分 别 为 : HTML 实 
际 内 容 (ContenD、 填 充 (Padding)、 边 框 (BordeD 和 边 距 (Margin)。 盒 模型 允许 我 们 在 其 他 
元 素 和 周围 元 素 边框 之 间 放 置 元 素 。 图 3.67 显示 了 盒 模 型 (Box Model) 的 结构 。 
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图 3.67 传统 盒 模型 示意 图 


Margin 是 盒子 的 最 外 层 边 距 ， 也 被 称 作 外 边 距 ， 可 以 清除 边框 外 的 区 域 ， 外 边 距 是 透 
明 的 。 

Border 是 盒子 的 边框 ， 围 绕 在 内 边 距 和 内 容 外 的 边框 往往 可 以 被 设置 为 不 同 的 样式 
和 颜色 ， 用 于 和 其 他 区 域 进 行 区 别 。 

Padding 是 盒子 的 填充 ， 也 叫 内 边 距 ， 可 以 清除 内 容 周围 的 区 域 ， 内 边 距 也 是 透明 的 。 

Content 是 盒子 的 内 容 区 域 ， 用 于 显示 文本 和 图 像 等 。 

值得 注意 的 是 ， 在 实际 应 用 过 程 中 存在 两 种 CSS 盒 模 型 ， 上 面 介 绍 的 盒 模型 被 称 为 
标准 CSS 盒 模型 ， 它 是 由 W3C 定义 的 盒 模型 。 还 有 一 种 被 称 为 下 盒 模型 ， 这 两 种 盒 模 
型 存在 一 定 差异 。 

W3C 盒 模 型 的 范围 包括 Margin、Border、Padding、Content， 并 且 Content 部 分 不 
包含 其 他 部 分 。 虽 然 正 盒 模 型 的 范围 也 包括 Margin、Border、Padding、Content， 但 与 
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标准 W3C 盒 模型 不 同 的 是 : 下 盒 模型 的 Content 部 分 包含 了 Border 和 Padding 部 分 。 

在 CSS3 中 ， 可 以 通过 属性 box-sizing 设置 盒 模型 为 W3C 盒 模 型 或 IE 盒 模型 。 当 
设置 为 box-sizing:content-box 时 ,将 采用 W3C 盒 模型 模式 解析 计算 ， 也 是 默认 模式 ; 当 
设置 为 box-sizing:border-box 时 ， 将 采用 正 盒 模型 模式 解析 计算 。 

由 于 W3C 盒 模 型 的 兼容 性 更 好 ， 因 此 目前 大 多 数 网 页 布局 都 采用 该 模型 ， 本 书 主 

可 采用 两 种 方式 定义 CSS 盒子 。 

方式 一 : 采用 Dreamweaver 可 视 化 方法 创建 

(1) 在 页 面 中 插入 <div> 标 签 ， 在 “类 ”中 输入 box， 如 图 3.68 所 示 。 接 着 单 击 “ 新 
建 CSS 规律 ”按钮 ， 弹 出 “新 建 CSS 规则 ”对 话 框 ， 如 图 3.69 所 示 。 


(2) 在 “新 建 CSS 规则 ”对 话 框 中 ,将 规则 定义 选择 为 “( 仅 限 该 文档 )”， 如 图 3.69 
所 示 。 



































新 建 CSS 规则 x 

Ne WETXiaaxal。 一 
类 《 梧 应 用 于 任何 wn 元 素 ) ~ E 

迁 拉 加 名称 : 

计 反 或 输入 计 反 器 名 称 。 
box v 

和 Div #5 x 人 
搬入 [在 插入 点 
bE 更 具体 

规则 定义 

选择 定义 规 Rd 位 置 
se 有 

图 3.68 插入 <div> 标 签 图 3.69 创建 box 类 


(3) 在 弹出 的 CSS 规则 定义 对 话 框 的 “ 方 框 ” 分 类 中 进行 设置 ， 具 体 参数 如 图 3.70 
所 示 。 

(4) 在 弹出 的 CSS 规则 定义 对 话 框 的 “边框 ”分 类 中 进行 设置 ， 具 体 参数 如 图 3.71 
所 示 。 


box 的 CSS 规则 定义 







































































X | ibex 的 Css 向 二 义 x 
血 方 杠 
watt sile wa 
fei 本 tt) ;2 问 全 部 相同 (5) 问 全 部 相同 |) 
i Paldine i vv 区 
昌 Top(k) 四 ne 
Risht(E) v 
Botton! (8) v 
Lf) 本 
医术 | [加 mE I ][ 丽 中 
图 3.70 设置 方 框 数据 图 3.71 设置 边框 样式 


(5) 在 Dreamweaver 中 的 预览 效果 如 图 3.72 所 示 ， 外 部 的 阴影 区 域 为 边界 ， 内 部 的 
阴影 区 域 为 内 部 填充 ， 中 间 的 黑色 区 域 是 边框 。 
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国 7 Dreamweaver 中 全 模型 的 示意 效果 


方式 二 : 代码 编写 
(1) 在 </title> 标 签 后 添加 如 下 代码: 





(2) 在 <body> 标 签 后 添加 一 对 <div> 标 签 ， 设 置 该 Div 为 box 类 ， 代 码 如 下 : 


<divalass='box'>W3C 僵 模 B<divy 
3.3 ”本章 小 结 


本 章 介绍 了 CSS 的 基本 概念 ， 以 及 在 Dreamweaver 中 使 用 CSS 的 方法 ， 重 点 介绍 
了 CSS 样式 设置 对 布局 和 文本 、 图 片 样式 的 应 用 效果 ， 讨 论 了 CSS 盒 模型 的 概念 与 应 
用 ， 通 过 示例 以 及 综合 案例 将 样式 表 的 设置 和 使 用 方法 渗透 其 中 ， 便 于 学 习 和 掌握 。 
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3.4” 课 后 训练 








- 仿照 班级 网 站 首页 的 设计 样 式 ， 下 下放 人 〖 面 ， 参 照 图 3.73。 


WI 





访 赴 台湾 科技 大 学 进修 辛 超 同 学 


每 一 次 漏 竺 加 上 的 阴间， 总 有 那么 一 些 平凡 的 人 努力 着 ， 当 机 会 委 青 时， 他 们 
才能 一 飞 中 天 。 大 家 说 ， 信 息 工程 学院 网 络 1001 理 的 章 起 就 是 这 样 的 人 ，2016 年 
9 月 ， 作 为 我 院 第 一 期 台湾 科技 大 学 进 侈 项目 入 选 者 之 一 的 章 超 ， 启 程 赴 台北 开 
始 了 台湾 科技 大 字 的 进修 。 他们 也 光 寺 地 于 得 了 字 侍 个 才 的 3000 元 奖 字 爹 > 

在 送行 会 上 ， 章 超 感谢 学 院 的 培养 ， 更 感谢 母校 为 他 们 搭建 的 深造 学 习 平 台 , 
并 表示 他 们 一 定 珍 异 学 习 机 会 ， 尽 快 适应 当地 的 生活 和 学 习 环境 ,页 服 困难 、 吕 
力学 习 , 早 昌 夺 成 学 业 ， 为 母校 争光 

音 起 ， 平 时 生活 中 是 一 个 活 痰 开间 的 大 男 地 的 向 边 驴 是 有 屠 一 群 院 他 
谈心 、 解 浆 的 朋友 。 课 款 对 电影 和 外 语 学 习 间 他 不 是 
在 从 舍 看 电影 ,就 是 在 读书 - 父母 常常 对 他 涪 ， ， 问 出 属于 自 
已 的 一 片 天 地 ! ”， 惑 是 这 样 简单 的 话语 却 深 深 烙印 在 他 的 心中 。 伯 室 二， 器 
力 ， 就 一 定 会 成 功 。 当 各 起 偶 炭 看 到 我 们 学 院 有 赴 台 湾 进 修 的 项 目 ， 就 真得 抓 住 
了 这 次 机 会 。 在 顺利 | 语 这 了 学 院 组 织 的 几 轮 面试 后 ， 或 由 入 围 。 














图 3.73 新 闻 页 面 
学 生 自 行 收集 素材 ， 设 计 完 成 自选 题目 的 网 站 。 
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4.1 CSS 弹性 念 模 型 


CSS 在 2.1 版 本 中 提出 了 盒 模型 的 概念 , 即 上 一 章 讲述 的 标准 盒 模型 。 在 标准 盒 模型 
布局 中 ， 元 素 的 基本 特征 被 高 度 概 括 ， 因 此 更 加 便于 设计 和 布局 页 面 。 在 CSS3 中 ， 标 准 
盒 模型 被 进一步 扩展 为 弹性 盒 模型 。 采 用 弹性 盒 模型 进行 布局 ， 可 以 更 为 有 效 地 对 容器 
中 的 条 目 进行 排列 、 对 齐 和 空白 的 分 配 ， 某 种 程度 上 更 像 图 形 编辑 软件 中 的 一 些 元 素 自 
动 布局 特征 。 


4.1.1 CSS3 弹性 盒 模型 


随 着 移动 设备 的 普及 ， 响 应 式 用 户 界 面 越 来 越 流 行 。 具 有 响应 式 用 户 界面 的 Web 应 
用 能 够 适 配 不 同 的 设备 尺寸 和 浏览 器 分 辩 率 ， 提 高 用 户 的 体验 。 响 应 式 用 户 界 面 设计 中 
的 布局 与 传统 Web 界面 中 的 布局 存在 一 定 的 差别 ， 其 设计 难度 和 复杂 度 也 相对 较 高 。 

CSS3 规范 引入 了 新 的 布局 模型 : 弹性 盒 模型 [flex box)， 用 于 解决 响应 式 用 户 界面 设 
计 中 的 难题 。 通 过 弹性 盒 模型 能 够 将 复杂 布局 的 需求 变 得 简单 化 ， 设 计 或 开发 人 员 只 需 
要 实现 其 布局 应 该 具有 的 行为 即 可 ， 布 局 的 具体 实现 方式 则 由 浏览 器 负责 完成 。 目 前 弹 
性 盒 模型 在 主流 浏览 器 中 都 得 到 了 支持 。 

弹性 盒 模型 布局 与 方向 无 关 ， 这 与 传统 布局 方式 中 的 设置 不 同 。 在 CSS 的 传统 布局 
中 , block 布局 是 把 块 在 垂直 方向 从 上 到 下 依次 排列 ,而 inline 布局 则 是 在 水 平方 向 排列 。 
弹性 盒 模型 布局 并 没有 这 样 内 在 的 方向 限制 ， 可 以 由 开发 或 设计 人 员 自 由 操作 。 

弹性 盒 模型 中 的 弹性 盒子 由 弹性 容器 (flex container) 和 弹性 子 元 素 (flex item) 组 成 。 弹 
性 容器 通过 设置 display 属性 的 值 为 flex 或 inline-flex， 将 其 定义 为 弹性 容器 。 在 弹性 容 
器 内 部 ， 可 以 添加 一 个 或 多 个 弹性 子 元 素 以 进行 布局 。 

1. 常用 属性 


弹性 盒子 的 属性 较 多 ， 在 使 用 的 时 候 也 需要 组 合 起 来 才能 达到 好 的 布局 效果 ， 常 / 
属性 如 表 4.1 所 示 。 





























表 4.1 弹性 盒子 的 常用 属性 
属 性 描述 





display 指定 盒子 类 型 





flex-direction 指定 弹性 容器 中 子 元 素 的 排列 方式 








justify-content | 设置 弹性 盒子 元 素 在 主轴 ( 横 轴 ) 方 向 上 的 对 齐 方式 
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( 续 表 ) 
属 性 描述 
align-items 设置 弹性 盒子 元 素 在 侧 轴 ( 纵 轴 ) 方 向 上 的 对 齐 方式 





flex-wrap 


设置 弹性 盒子 的 子 元 素 超出 父 容器 时 是 否 换行 





align-content 


修改 flex-wrap 属性 的 行为 ， 类 似 于 align-items， 但 不 是 设置 子 元 素 对 齐 ， 而 是 设置 
行 对 齐 

















flex-flow Flex-direction 和 flex-wrap 的 简写 

order 设置 弹性 盒子 的 子 元 素 排列 顺序 

align-self 在 弹性 子 元 素 上 使 用 ， 覆 盖 弹 性 容器 的 align-items 属性 
flex 设置 弹性 盒子 的 子 元 素 如 何 分 配 空间 


1. display 属性 
该 属性 是 最 为 常用 的 属性 ， 用 于 定义 盒子 的 类 型 。 如 果 需 要 使 用 弹性 盒子 ， 需 要 将 














其 设置 为 -webkit-flex。 定 义 弹 性 盒子 的 基本 设置 如 下 : 


flex-container { 
display: -webkit-flex:; 
width: 400px; 
height: 300px: 


} 


2. flex-direction 属性 


该 属性 指定 弹性 容器 中 子 元 素 的 排列 方式 ，flex-direction 的 可 取 值 有 : row 表示 横向 
从 左 到 右 排列 ( 左 对 齐 )， 也 是 默认 的 排列 方式 ，row-reverse 表示 反 转 横向 排列 ( 右 对 齐 )， 
从 后 往 前 排 ， 最 后 一 项 排 在 最 前 面 column 表示 纵向 排列 ; column-reverse 表示 反 转 纵向 
排列 ， 从 后 往 前 排 ， 最 后 一 项 排 在 最 上 面 ， 如 图 4.1 所 示 。 


ET . 


row 横向 排列 ， 从 左 向 右 














row-reverse 模 问 排列 ， 从 右 向 左 

















column 纵向 排列 ， 从 上 向 下 





column-reverse 纵向 排列 ， 从 下 向 上 








图 4.1 弹性 盒子 中 元 素 的 排列 方式 
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(1) 为 了 实现 以 上 效果 ， 首 先 要 在 box 类 中 定义 display 属性 为 Hex， 实 现 弹性 盒子 。 
在 代码 中 为 了 兼容 不 同 浏览 器 ， 对 display 属性 采用 了 多 值 定义 方式 。 


(2) 将 box 类 中 的 下 元 素 定义 为 弹性 盒子 中 需要 排列 的 元 素 。 


(3) 在 id 为 box 的 Div 中 ， 元素 排列 方式 为 row， 即 从 左 向 右 横向 排列 。box2 的 排列 
方式 为 row-reverse， 即 从 右 向 左 横向 排列 ;box3 为 column， 即 纵向 排列 。 完 整 代码 如 下 : 
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A 

3. justify-content 和 align-items 属性 

justify-content 属性 用 于 设置 弹性 盒子 中 的 元 素 沿 着 主轴 ( 横 轴 ) 方 向 对 齐 ，align-items 
属性 则 用 于 设置 为 沿 侧 轴 ( 纵 轴 ) 方 向 对 齐 。 这 两 个 属性 的 值 相似 ， 名 称 完 全 一 样 ， 只 是 排 
列 对 齐 的 方向 不 同 而 已 。 

flex-start 在 justify-content 属性 中 表示 弹性 盒子 元 素 靠近 左边 对 齐 ， 其 他 的 弹性 盒子 
元 素 依次 向 右 平 齐 摆 放 。align-items 属性 中 的 lex-start 表示 弹性 盒子 元 素 向 上 对 齐 。 

flex-end 在 justify-content 属性 中 表示 弹性 盒子 元 素 向 行 尾 紧 挨 填充 ， 也 就 是 靠近 右 
边 对 齐 。 其 他 弹性 盒子 元 素 依次 平 齐 摆 放 。align-items 属性 中 的 lex-end 表示 弹性 盒子 元 
素 向 下 对 齐 。 

center 表示 弹性 盒子 元 素 居中 紧 挨 着 填充 或 放置 。 

justify-content 属性 的 space-between 和 space-around 值 都 是 将 弹性 盒子 元 素平 均 分 布 
在 一 行 上 ， 但 前 者 的 弹性 盒子 元 素 在 平均 分 布 时， 通常 两 边 的 弹性 盒子 元 素 会 紧 靠 两 侧 ; 


后 者 则 两 边 留 有 一 半 的 间隔 空间 。 
space-between 与 space-around 的 区 别 如 图 4.2 所 示 。 





x 
[rr Te 
justify-content 的 space-between 与 space-around 的 区 别 


‘space-between 


space-around 


4.2 ”space-between 与 space-around 的 区 别 








完整 代码 如 下 : 
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4. flex-wrap 属性 


该 属性 用 于 设置 弹性 盒子 的 子 元 素 超 出 父 容器 时 是 否 换行 。 默 认 情况 下 为 nowrap， 
即 不 换行 ， 如 果子 元 素 超过 父 容器 ， 可 能 会 溢出 容器 。 当 设置 为 wrap 时 ， 弹 性 容器 为 多 
行 ， 这 种 情况 下 弹性 子 元 素 溢出 的 部 分 会 被 放置 到 新 行 ， 子 元 素 内 部 会 发 生 断 行 。 当 取 
值 为 wrap-reverse 时 ， 表 示 反 转 wrap 排列 。 

5. align-content 属性 

该 属性 用 于 修改 flex-wrap 属性 的 行为 ， 类 似 align-items， 但 不 是 设置 子 元 素 对 齐 ， 而 
是 设置 行 对 齐 。stretch 为 默认 值 ,各 行将 会 伸展 以 占用 剩余 的 空间 。flex-start\ flex-end、 center、 
space-between、space-around 等 值 与 align-items 属性 的 对 应 值 类 似 ， 只 是 对 齐 对 象 为 行 。 

6. 用 于 子 元 素 的 属性 

order 属性 : 用 于 设置 弹性 盒子 的 子 元 素 排列 顺序 ， 可 以 用 order 属性 ， 用 整数 值 来 
定义 排列 顺序 ， 数 值 小 的 排 在 前 面 ， 该 属性 也 可 以 为 负 值 。 

align-self 属性 : 用 于 在 子 元 素 上 使 用 ， 可 以 覆盖 容器 的 align-items 属性 。 

flex 属性 : 用 于 设置 弹性 盒子 的 子 元 素 如 何 分 配 空间 。 


4.1.2 ”背景 和 边框 


CSS3 在 背景 和 边框 方面 有 所 加 强 ， 尤 其 是 对 边框 方面 的 提高 ,减少 了 很 多 原来 需要 
通过 图 片 来 实现 的 效果 。 


1. 背景 


在 CSS3 的 新 特性 中 ， 可 以 为 背景 设置 多 张 图 片 ， 不 同 的 背景 图 片 之 间 用 逗号 隔 开 ， 
所 有 图 片 中 显示 在 顶端 的 为 第 一 张 ， 也 可 以 给 不 同 的 图 片 设置 多 个 不 同 的 属性 。 

background-image 属性 用 于 设置 背景 图 片 ，background-position 属性 用 于 设置 位 置 ， 
background-repeat 属性 用 于 设置 重复 排列 方式 。 

下 面 为 <div> 标 签 设置 两 张 不 同 图 片 背 景 。 

HTML 代码 如 下 : 





CSS 设置 如 下 : 
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预览 效果 如 图 4.3 所 示 ， 在 CSS 的 background-image 属性 设置 中 ， 用 到 了 两 个 URL 
来 指定 不 同 的 图 片 。 在 background-position 属性 中 将 第 一 张 背景 图 片 的 位 置 设置 在 右边 底 
部 ， 将 第 二 张 背景 图 片 设置 在 左上 方 ， 在 background-repeat 属性 中 ， 将 前 一 张 图 片 设置 
为 不 重复 排列 ， 将 第 二 张 设置 为 重复 排列 。 


二 日 x 
ao 2 本 万 =] 司 安 便 @ 





(二 机 
|Bcsens < 总 
CSS3 背 景 图 片 设 置 
了 月 贡 图 片 
设 轴 为 不 同 的 指 列 方式 











图 4.3 两 张 背景 图 片 
以 上 例子 还 有 如 下 简略 定义 方法 : 





background-size 属性 用 于 设 定 背景 图 片 的 大 小 。 在 CSS3 以 前 , 背景 图 片 的 大 小 由 图 
片 的 实际 大 小 决定 。 在 CSS3 中 可 以 通过 指定 像素 或 百分比 大 小 在 不 同 的 环境 中 指定 背景 
图 片 的 大 小 。 当 指定 background-size:100% 100% 时 ， 背 景 图 片 将 被 拉 伸 填充 相应 的 内 容 
区 域 。 

CSS3 的 background-Origin 属性 用 于 指定 背景 图 片 的 位 置 区 域 ， 可 以 设置 为 
content-box、padding-box 和 border-box 区 域 ， 在 每 个 区 域内 都 可 以 放置 背景 图 片 ， 但 位 
置 效 果 却 不 同 ， 如 图 4.4 所 示 。 

HTML 代码 如 下 : 
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CSS 设置 如 下 : 









































图 4.4 背景 图 片 的 位 置 
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2. 边框 


在 CSS3 中 可 以 创建 更 多 样式 的 边框 ， 如 圆 角 边 框 、 阴 影 框 等 ， 主 要 涉及 的 边框 属性 
有 border-radius 和 box-shadow 等 。 
在 CSS3 之 前 ， 圆 角 效 果 往 往 需要 使 用 多 张 图 片 作为 背景 图 案 。CSS3 提供 的 圆 角 旧 
浏览 器 直接 演 染 ， 不 需要 图 片 的 支持 ， 因 此 减少 了 维护 的 工作 量 ， 提 高 了 网 页 性 能 。 
border-radius(border-top-left-radius、 border-top-right-radius、 border-bottom-right-radius、 
border-bottom-left-radius) 属 性 用 于 设置 贺 角 ， 如 果 四 个 圆 角 统一 采用 border-radius， 其 后 
可 以 跟 一 到 四 个 值 。 
如 果 只 设置 一 个 值 ， 表 示 四 个 圆 角 都 使 用 这 个 值 : 
border-radius:10px: 
如 果 设 置 四 个 值 ， 则 分 别 对 应 左上 角 、 右 上 角 、 右 下 角 、 左 下 角 ( 顺 时 针 顺 序 ): 
border-radius: 10px,5px, 10px,5px; 


如 果 设 置 两 个 值 ， 则 表示 左上 角 和 右 下 角 使 用 第 一 个 值 ， 右 上 角 和 左下 角 使 用 第 二 
个 值 。 如 果 设 置 三 个 值 ， 则 表示 左上 角 使 用 第 一 个 值 ， 右 上 角 和 左下 角 使 用 第 二 个 值 ， 
右 下 角 使 用 第 三 个 值 。 

border-top-left-radius、 border-top-right-radius\ border-bottom-right-radius、 border-bottom- 
left-radius 这 四 个 属性 恰好 对 应 四 个 圆 角 ， 可 以 通过 这 四 个 属性 逐一 设置 对 应 的 角 。 如 果 
属性 值 为 一 个 ， 则 圆 角 的 水 平 半径 和 垂直 半径 都 为 该 值 。 如 果 需 要 将 一 个 圆 角 的 两 边 设 
置 为 不 同 半径 ， 则 可 以 在 该 属性 后 设置 两 个 不 同 半径 。 

设置 水 平 半径 和 垂直 半径 一 致 的 圆 角 : 

border-top-left-radius: 20px; 

设置 水 平 半 径 和 垂直 半径 不 一 致 的 圆 角 ， 效 果 如 图 4.5 所 示 。 

border-top-left-radius: 10px 20pX; 





























图 4.5 边框 圆 角 
下 面 的 设置 更 为 复杂 ， 每 一 个 圆 角 的 两 个 半径 都 不 同 ， 效 果 如 图 4.6 所 示 。 
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4.6 不 同 半径 的 边框 圆 角 
以 上 情况 也 可 以 用 border-radius 表示 : 


box-shadow 属性 用 于 设置 阴影 ， 有 四 个 值 ， 前 两 个 为 沿 x 和 y 方向 的 偏 移 量 ， 第 三 
个 为 虚 化 值 ， 最 后 一 个 为 阴影 的 颜色 。 

例 4.1: 制作 圆 角 边框 和 阴影 边框 

(1) 在 <body> 标 签 内 添加 两 对 <div> 标 签 ， 并 分 别 命名 id 一 一 “radiusbox” 为 显示 圆 
角 ，“shadowbox” 为 显示 阴影 ， 如 下 所 示 : 





(2) 在 <style> 中 添加 样式 设置 ， 对 <div> 统 一 设置 边框 的 线条 和 颜色 等 。 





(3) 为 两 个 id 对 应 的 Div 设置 不 同 的 样式 ,一 个 为 圆 角 (半径 25px), 男 一 个 为 阴影 (x 
和 y 方 向 的 偏 移 为 10px， 模 糊 程度 为 Spx， 颜 色 为 #888888)， 预 览 效果 如 图 4.7 所 示 。 
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图 47 圆 角 边框 和 阴影 边框 示例 

圆 角 效果 不 仅 可 以 在 <div> 上 实现 , 使 用 border-radius 属性 可 以 给 任何 元 素 制作 圆 角 。 
4.1.3 文字 特效 

CSS3 除了 支持 CSS2 中 原 有 的 文字 样式 设置 外 ， 还 提供 了 一 些 新 的 样式 设置 ， 尤 其 


是 文本 效果 方面 比 以 往 更 加 丰富 。CSS3 中 包含 几 个 新 的 文本 属性 : text-shadow、 
box-shadow、text-overflow、word-wrap、word-break 等 。 


1. 文本 阴影 


text-shadow 属性 用 于 给 文本 产生 阴影 ， 该 属性 有 四 个 值 ， 分 别 用 于 设置 水 平 阴影 距 
离 、 垂 直 阴 影 距离 、 模 糊 距离 以 及 阴影 的 颜色 ， 从 而 产生 不 同 效果 的 阴影 。 
下 面 的 示例 为 一 级 标题 产生 阴影 效果 ， 如 图 4.8 所 示 。 
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这 是 标题 3 的 阴影 效果 ! 
图 4.8 文字 阴影 
2. 文本 的 排列 


文本 的 排列 特性 在 网 页 制作 过 程 中 是 影响 浏览 效果 的 一 个 重要 因素 ， 因 此 掌握 文本 
在 容器 内 的 排列 、 换 行 等 特性 是 保证 文字 内 容 正确 显示 的 必要 手段 。 在 CSS3 中 与 文本 排 
列 相关 的 属性 有 : text-overflow 属性 用 于 定义 文本 溢出 时 的 处 理 方式 ，word-wrap 属性 用 
于 定义 文本 的 换行 。 

text-overflow 属性 有 三 个 可 取 值 : clip、ellipsis 和 string。clip 表示 对 文本 进行 修剪 ， 
ellipsis 表示 显示 省 略 号 以 代表 被 修剪 的 文本 : string 为 某 个 给 定 字符 串 ， 用 该 字符 串 代 替 
被 修剪 的 文本 内 容 ， 该 值 只 在 部 分 浏览 器 中 有 效 。 

例 4.2: 文本 修剪 效果 

完整 代码 如 下 : 
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预览 效果 如 图 4.9 所 示 。 





ES GEE Er Q 冤 四 外 
以 下 div 容器 内 的 文本 无 法 完全 显示 ， 可 以 看 到 它 被 城 划 了。 

dr 使 用 "text-overflowrelipsis 

div 便 用 "text-overflow-clip”- 





图 4.9 文本 裁剪 


对 于 英文 内 容 ， 如 果 排 在 行 末 的 单词 较 长 ， 可 能 会 扩展 到 内 容 区 域 的 外 面 ， 此 时 可 
以 使 用 自动 换行 属性 强制 换行 。word-wrap 属性 可 以 用 于 完成 此 项 任务 ， 有 两 个 可 取 值 : 
normal 和 break-word。normal 只 在 允许 的 断 字 点 换行 (浏览 器 保持 默认 处 理 )，break-word 
在 长 单词 或 URL 地 址 内 部 进行 换行 。 

例 4.3: 文本 换行 

代码 如 下 : 
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在 浏览 器 中 的 预览 效果 如 图 4.10 所 示 


- OO x 


人 Drvsen Do ell sc 











图 4.10 换行 效果 
3. 关于 字体 


在 CSS3 以 前 , 关于 对 页 面 上 字体 的 选择 , 往往 是 根据 浏览 器 所 在 计算 机 上 已 经 安装 的 
字体 来 选择 。 如 果 客 户 端 没有 该 字体 ,浏览 器 会 选择 相近 的 字体 来 显示 。 在 CSS3 中 ， 网 页 
设计 者 可 以 使 用 自己 指定 的 字体 ， 将 字体 文件 包含 在 网 站 中 ， 自 动 下 载 给 需要 的 用 户 。 

在 @font-face 规则 中 ， 首 先 定义 字体 的 名 称 (如 myFont)， 然 后 指向 字体 文件 。 
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4.1.4 其 他 
1. 2D/3D 转换 


CSS3 提供 功能 强大 的 2D 和 3D 转换 ， 能 够 使 元 素 产 生 形 状 、 大 小 和 位 置 等 的 改变 。 
常用 的 2D 转换 方法 有 translate0 、rotate(0 、scale0、skew0O 和 matrix()， 使 用 方法 见 表 4.2。 























表 4.2_2D 转换 方法 

函 数 描述 
matrix(nnnnnn) 定义 2D 转换 ， 使 用 六 个 值 的 矩阵 
translate(x,y) 定义 2D 转换 ， 沿 着 又 和 立轴 移动 元 素 
translateX(n) 定义 2D 转换 ， 沿 着 义 轴 移动 元 素 
translateY(n) 定义 2D 转换 ， 沿 着 了 轴 移 动 元 素 
scale(x 定义 2D 缩放 转换 ， 改 变 元 素 的 宽度 和 高 度 
scaleX(n) 定义 2D 缩放 转换 ， 改 变 元 素 的 宽度 
scaleY(n) 定义 2D 缩放 转换 ， 改 变 元 素 的 高 度 
rotate(angle) 定义 2D 旋转， 在 参数 中 规定 角度 
skew(x-angle,y-angle) 定义 2D 倾斜 转换 ， 沿 着 X 和 也 轴 
skewX(angle, 定义 2D 倾斜 转换 ， 沿 着 义 轴 
skewY(angle) 定义 2D 倾斜 转换 ， 沿 着 立轴 


值得 注意 的 一 点 是 , 在 不 同 的 浏览 器 中 , 使 用 转换 的 时 候 , 略 有 不 同 。Internet Explorer 
10、Firefox 和 Opera 使 用 默认 方式 ， 也 就 是 直接 使 用 这 些 方法 ，Chrome 和 Safari 要 求 
前 级 -webkit-， 而 Internet Explorer 9 要 求 前 级 -ms-。 

以 下 示例 通过 与 原始 元 素 对 比 演示 两 种 变化 方法 的 使 用 ， 其 他 变化 方法 类 似 。 需 要 注 
意 的 是 ， 如 果 连 续 使 用 转换 方法 ， 前 一 种 转换 带 来 的 位 置 变 化 可 能 会 影响 到 下 面 的 转换 。 

例 4.4: 2D 变换 

(1) 在 <body> 内 添加 三 对 <div>， 代 码 如 下 : 


(2) 在 <head> 内 创建 样式 设置 ， 统 一 设置 Div 的 形状 与 边框 ， 代 码 如 下 : 








G) 设置 两 种 转换 方式 ， 代 码 如 下 : 
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在 浏览 器 中 的 预览 效果 如 图 4.11 所 示 。 
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图 4.11 2D 变换 效果 
CSS3 中 的 3D 转换 与 2D 转换 类 似 ， 主 要 是 参数 中 多 了 z 方向 的 参数 。 
2. 多 列 


CSS3 提供 了 一 种 类 似 于 Word 中 分 栏 功能 的 多 列 显示 效果 ， 可 以 在 一 个 元 素 的 区 域 
内 对 文本 内 容 进 行 多 列 显示 ， 以 达到 类 似 报纸 的 分 栏 效果 。CSS3 为 实现 多 列 显示 提供 了 
多 个 属性 ， 常 用 属性 如 下 : 

column-count: 用 于 规定 元 素 被 分 隔 的 列 数 。 

column-gap: 用 于 规定 列 之 间 的 间隔 距离 。 

column-rule: 用 于 设置 列 之 间 的 宽度 、 样 式 和 颜色 规则 。 

column-width: 用 于 规定 列 的 宽度 。 

columns: 它 是 简写 属性 ， 用 于 设置 列 宽 和 列 数 。 

下 面 的 例子 在 Div 中 进行 分 栏 ， 效 果 如 图 4.12 所 示 。 
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则 - | 
column-count: 定 元 column-width 用 于 规定 列 的 
人 er 克 度 ， 
可 以 在 一 个 元 素 的 区 域内 colnmn-gapt 用 于 规 定 列 之 。 | colamns， 为 向 写 属性 ， 用 于 
进行 多 列 显示 ， 忆 | 间 的 间隔 距 高 - 设置 列席 和 列 数 。 
达到 类 似 类 似 于 报纸 分 村 column-rule 用 于 设置 列 之 
效果 。CSS3 为 实现 多 列 提供 。 | 间 的 宽度 、 样 式 和 额 色 规 


图 4.12 多 列 效 果 


完整 代码 如 下 : 





第 4 章 CSS 进 阶 。97 。 


4.2 CSS3 响应 式 网 页 设计 


4.2.1 响应 式 网 页 设计 


采用 响应 式 设计 方式 实现 的 网 站 ， 其 页 面 可 以 根据 用 户 的 行为 和 设备 环境 进行 相应 
的 响应 和 调整 。CSS3 在 设计 之 初 就 已 经 将 其 考虑 在 内 ， 通 过 弹性 盒 模型 、 网 格 布局 、 咱 
应 式 图 片 等 技术 实现 响应 式 网 页 设计 。 

响应 式 网 页 设计 过 程 中 的 一 个 核心 技术 就 是 弹性 化 的 思想 ， 也 就 是 页 面 中 的 一 切 元 
素 尽 可 能 实现 弹性 化 ， 在 不 同情 境 下 变换 自己 的 尺寸 ， 以 达到 适应 不 同 浏览 需求 的 目的 。 

响应 式 网 页 的 应 用 也 为 网 页 的 布局 风格 带 来 一 定 程度 的 革新 ， 出 现 了 一 些 不 同 以 往 
的 布局 形式 。 

1. 背景 大 图 结合 简单 多 列 布局 


背景 大 图 用 于 抓 住 浏览 者 的 眼球 ， 尤 其 是 在 屏幕 尺寸 较 小 的 移动 设备 上 ， 这 一 点 万 
为 突出 。 简 单 多 列 布局 可 以 简洁 明了 地 呈现 信息 分 类 ,便于 将 信息 更 有 效 地 组 织 在 一 起 ， 
同时 也 能 够 为 用 户 提供 方便 的 用 于 深入 了 解 的 条 件 。 使 用 这 种 布局 模式 的 网 站 不 仅 看 上 
去 很 干净 、 清 两， 有 足够 强劲 的 视觉 表现 力 ， 而 且 还 能 够 突破 断 点 的 限制 ， 不 管 设备 屏 
幕 的 大 小 ， 都 为 用 户 展示 充足 的 内 容 ， 供 用 户 浏览 和 探索 ， 实 现 真正 的 响应 式 设计 。 

在 这 种 布局 模式 下 ， 通 常 包含 以 下 内 容 : 

@ 位 于 项 部 的 能 够 伸缩 的 导航 菜单 栏 。 
背景 大 图 ， 附 有 文字 标题 ， 或 者 以 轮 播 的 方式 展现 一 组 图 片 。 
2 到 4 个 分 栏 ， 承 载 不 同类 别 的 信息 。 
主要 内 容 区 域 。 
页 脚 ， 一 般 用 于 显示 版 权 信息 。 
本 章 后 面 的 综合 案例 多 采用 此 种 布局 设计 和 实现 。 
2. 瀑布 流 布局 


瀑布 流 布局 的 样式 早 在 2012 年 就 出 现 过 ， 整 个 网 页 也 是 基于 一 种 网 格 布局 模式 ， 但 
每 行 中 每 一 个 项 目的 高 度 并 不 一 定 相 同 , 会 随 着 内 容 ( 图 片 或 文字 ) 的 变化 而 变化 。 每 个 项 
目 列表 呈 堆 栈 形式 排列 ， 彼 此 间 没 有 多 余 的 间距 ， 图 4.13 所 示 为 典型 的 瀑布 流 布 局 。 



































图 4.13 瀑布 流 布局 
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4.2.2 ”响应 式 网 页 设计 用 到 的 技术 
1. viewport 


viewport 也 叫 视 区 , 可 以 理解 为 网 页 的 可 视 区 域 。 这 个 概念 的 提出 主要 是 为 了 使 网 页 
能 够 在 移动 终端 设备 (平板 电脑 或 手机 ) 上 正常 显示 布局 。 

viewport 需要 放 在 <meta> 标 签 中 ， 并 且 需 要 其 他 辅助 属性 一 同 作用 才能 达到 效果 。 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

width: 控制 viewport 的 大 小 ， 可 以 指定 一 个 值 ， 如 600; 也 可 以 使 用 一 个 特殊 的 值 ， 
如 device-width 表示 设备 屏幕 的 宽度 。 

height: 和 width 对 应 ， 指 定 高 度 。 

initial-scale: 初始 缩放 比例 ， 即 页 面 第 一 次 加 载 时 的 缩放 比例 。 

maximum-scale: 允许 用 户 缩放 到 的 最 大 比例 。 

minimum-scale: 允许 用 户 缩放 到 的 最 小 比例 。 

user-scalable: 用 户 是 否 可 以 手动 缩放 。 


2. 网 格 视图 


网 格 布局 是 目前 流行 的 网 页 布局 思想 ， 采 用 这 种 布局 方式 的 好 处 在 于 能 够 将 网 页 分 
割 成 网 格 进行 拼接 ， 实 现 扁平 化 设计 ， 便 于 添加 各 种 元 素 和 快速 设计 网 页 布局 。 响 应 式 
网 格 视图 通常 是 12 列 ， 宽 度 为 100%， 在 调整 浏览 器 窗口 大 小 时 会 自动 伸缩 。 

图 4.14 所 示 为 网 格 视 图 原理 , 底层 虚线 为 逻辑 上 划分 的 12 列 网 格 ， 上 层 的 阴影 区 域 
为 设计 布局 的 实际 区 域 。 

创建 响应 式 网 格 视图 时 , 首先 要 确保 所 有 的 HTML 元 素 都 有 box-sizing 属性 且 设 置 
为 border-box。 确 保 边 距 和 边框 包含 在 元 素 的 宽度 和 高 度 间 ， 代 码 如 下 : 

Sat 

box-sizing: border-box: 




















} 
于 淹 汪 十 半 放 本 
| | | | | 
:| 
[a 和 4 1 
是 天生 天 攻 遇 看 晤 本 本 现时 


图 4.14 网 格 视图 
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box-sizing 属性 允许 以 特定 的 方式 定义 匹配 某 个 区 域 的 特定 元 素 。 如 果 需 要 并 排放 置 
两 个 带 边框 的 框 ， 可 通过 将 box-sizing 设置 为 “border-box” 来 实现 。 可 以 让 浏览 器 呈现 
出 带 有 指定 宽度 和 高 度 的 框 ， 并 把 边框 和 内 边 距 放 入 框 中 。 

例 4.5: 简单 响应 式 页 面 

要 设计 的 简单 响应 式 页 面 中 包含 两 个 并 列 元 素 ， 并 定义 为 指定 比例 ， 显 示 效 果 如 图 
4.15 所 示 ， 左 侧 为 窗口 较 宽 时 的 效果 ， 右 侧 为 窗口 较 小 时 的 效果 。 
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图 4.15 ”响应 式 页 面 
代码 如 下 : 
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3. 媒体 查询 


为 了 使 用 不 同 显示 设备 的 屏幕 大 小 , CSS3 通过 媒体 查询 (@media) 实 现 了 针对 不 同 媒 
体 类 型 定义 不 同样 式 。@media 的 使 用 格式 如 下 : 


也 可 以 针对 不 同 的 媒体 使 用 不 同 的 样式 表 文 件 : 





例 4.6: 媒体 查询 示例 (如 图 4.16 所 示 ) 
该 例 在 上 面 示例 的 基础 上 实现 ， 页 面 窗口 小 于 640px 时 ， 并 列 排列 的 两 个 区 域 变 成 
上 下 排列 。 在 上 一 个 示例 CSS 规则 的 最 后 添加 以 下 规则 : 
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图 4.16 媒体 查询 效果 
4. 响应 式 图 片 


在 以 往 的 页 面 中 ， 一 旦 图 片 的 尺寸 设置 好 之 后 ， 在 浏览 器 中 浏览 时 就 不 再 发 生 改 变 。 
借助 CSS3 新 的 响应 式 图 片 功能 , 图片 可 以 在 浏览 时 根据 浏览 器 窗口 的 变化 而 变化 。 对 于 
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一 般 图 片 ， 可 以 通过 设置 width 或 max-width 两 个 属性 为 100% 来 实现 响应 式 图 片 。 二 者 
的 区 别 在 于 : 如 果 width 属性 被 设置 为 100%， 图 片 会 根据 上 下 范围 实现 响应 ,也 就 是 说 ， 


图 片 有 可 能 会 大 于 原始 尺寸 ， 如 果 max-width 属性 被 设置 为 100%， 图 片 永远 不 会 大 于 原 
始 尺 寸 。 


例 4.7: 响应 式 图 片 (如 图 4.17 所 示 ) 
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图 4.17 响应 式 图 片 
代码 如 下 : 
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<body> 

< 人 > 

<img class="img-width" src="images/teapot.jpg"></p> 

class="img-max-width" src="images/teapot.jpg"></p> 

<Jbody> 

</html> 

页 面 的 背景 图 片 也 具有 自 适 应 能 力 ， 可 以 通过 以 下 三 种 方式 实现 : 

(1) 将 background-size 属性 设置 为 contain， 背 景 图 片 将 按 比 例 自 适 应 内 容 区 域 ， 并 
且 图 片 保持 比例 不 变 。 

(2) 将 background-size 属性 设置 为 100%， 背 景 图 片 将 延展 覆盖 整个 区 域 。 

(3) 将 background-size 属性 设置 为 cover， 则 会 把 背景 图 片 扩 展 至 足够 大 ， 以 使 背景 
图 片 完 全 覆盖 背景 区 域 。 注 意 background-size 属性 保持 了 图 片 的 比例 ， 因 此 背景 图 片 的 
某 些 部 分 无 法 显示 在 背景 定位 区 域内 。 


4.3 使 用 HTMLS 与 CSS3 布局 的 综合 案例 


采用 HIMLS 与 CSS3 进行 布局 时 ,可 以 沿用 HIML4 和 CSS2 的 布局 方式 ,但 HTML5 
和 CSS3 提供 了 更 多 新 的 适合 布局 的 理念 , 从 而 影响 到 目前 网 页 设计 和 布局 的 一 些 风 格 和 
习惯 。 

在 以 往 的 布局 中 大 量 采用 了 <div> 标 签 ， 可 通过 id 或 class 为 其 设 定 不 同 的 意义 和 样 
式 。 在 HTMLS5 中 虽然 保留 了 <div> 标 签 ， 但 也 提供 了 一 些 新 的 具有 清晰 语义 的 标签 ， 通 
过 这 些 标签 可 以 使 设计 者 在 规划 网 页 布局 时 思路 更 加 清晰 ， 同 时 这 样 的 页 面 对 于 搜索 引 
擎 来 说 也 更 加 友好 。 

HTMLS5 提供 多 个 具有 语义 的 标签 ， 设 计 者 可 以 根据 布局 的 需求 来 加 以 设计 和 布置 。 
常用 的 新 语义 标签 如 表 4.3 所 示 : 


表 4.3 常用 语义 标签 列表 






















































































标签 说 明 
于 表示 整体 性 内 容 ， 内 容 中 可 以 包含 <header>、<section> 等 标签 中 的 信息 ， 如 
论坛 上 的 帖子 、 博 客 中 的 文章 、 用 户 评论 等 
i 一 般 可 作为 <article> 标 签 的 附属 信息 部 分 ， 内 容 可 以 是 与 当前 文章 有 关 的 相关 资 
料 、 标 签 、 名 词 解释 等 
于 作为 网 页 或 section 部 分 的 页 脚 ， 通 常 含有 该 节 的 一 些 基 本 信息 ， 如 作者 、 相 
<footer> 
关 文 档 链 接 、 版 权 资 料 等 
<header> 以 表示 网 页 或 section 部 分 的 页 眉 ， 通 常 是 一 组 解释 性 或 导航 性 的 条 目 
<nav> 于 作为 页 面 的 导航 链接 区 域 
<section> 于 组 合 一 些 主题 相关 的 内 容 ， 如 文档 中 的 “ 节 ”“ 段 ”等 
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部 分 语义 标签 可 以 多 次 出 现在 不 同 的 部 分 ， 此 种 情况 下 可 以 通过 id 或 class 对 其 进行 区 
分 ,采用 语义 标签 创建 的 网 页 更 容易 被 理解 , 图 4.18 所 示 为 采用 语义 标签 创建 的 网 页 示意 图 。 















































header 


section section 


article 


图 4.18 采用 语义 标签 的 网 页 布局 结构 
4.3.1 Web 页面 案例 : 企业 网 站 


企业 网 站 是 企业 信息 化 建设 过 程 中 必 不 可 少 的 一 环 ， 企 业 网 站 通过 互联 网 进行 网 络 
营销 和 形象 宣传 ， 甚 至 eu ng 目前 企业 网 站 的 主要 
功能 包含 企业 宣传 、 产 品 资讯 发 布 、 招 聘 等 。 企 业 网 站 的 布局 首先 以 浏览 者 的 视觉 体验 
为 依据 ， 加 强 客户 服务 ， 完 善 网 络 业务 ， 吸 引 潜在 客户 关注 。 

此 企业 网 站 案例 采用 较为 简洁 的 页 面 设 计 风 格 ， 展 示 企 业 形 象 ， 发 布 企业 信息 ， 展 
示 商 品 信息 。 图 4.19 为 首页 的 预览 效果 。 




















图 4.19 企业 网 站 首页 的 预览 效果 
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(1) 创建 页 面 基 本 结构 的 标签 ， 并 为 其 设置 相应 的 id。 页 面 结构 主体 采用 多 行 排列 的 
形式 ， 且 在 设计 中 大 量 采用 了 HTMLS5 语义 标签 ， 具 体 结构 划分 如 表 4.4 所 示 。 


表 4.4 页面 结构 
标签 说 明 

header id-"top" | | 用 于 风 示 企业 名 称 

nav id="top_menu" | 导航 条 
Se | | 用 于 曙 寺 首页 大 图 
section id="main" section id="sidebar" 左 侧 菜单 

右 侧 新 闻 公告 
section id="links" | | 产品 链接 
footer id="copyright" | | 版 权 信息 


代码 如 下 ， 保 存 为 index.html。 





@Q) 在 CSS 文件 夹 下 新 建 样 式 文件 style.css， 并 链接 到 index html 文件 ， 如 图 4.20 所 示 。 
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图 4.20 ”创建 和 链接 样式 文件 
在 样式 文件 中 添加 如 下 代码 ， 清 除 所 有 边 距 。 





(3) 在 id="top" 的 <header> 标 签 中 添加 两 对 <div> 标 签 ， 分 别 命名 为 logo 和 top_link， 
代码 如 下 : 





在 style.css 文件 中 ， 为 以 上 三 个 标签 添加 样式 设置 ， 代 码 如 下 : 
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(4) 在 id="top_menu" 的 <nav> 标 签 中 创建 项 目 列表 ， 代 码 如 下 : 


在 样式 文件 中 添加 样式 ， 形 成 横向 排列 的 导航 信息 ， 代 码 如 下 : 
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(5) 为 banner 标记 设置 样式 ， 代 码 如 下 : 





完成 以 上 步骤 后 ， 在 浏览 器 中 的 预览 效果 如 图 4.21 所 示 。 








4.21 项 部 预览 效果 


(6) 在 id="sidebar" 的 <section> 标 签 中 添加 一 对 <nav> 和 一 对 <footer> 标 签 , 在 <nav> 标 
签 中 制作 菜单 列表 ， 在 <footer> 标 签 中 添加 相应 的 表单 元 素 ， 代 码 如 下 : 
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在 CSS 样式 文件 中 设置 相应 id 标签 的 样式 ， 代 码 如 下 : 
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(7) 在 id="content" 的 <section> 标 签 中 添加 表格 ， 参 照 图 4.19 制作 新 闻 公告 列表 。 
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在 样式 文件 中 添加 表格 中 的 相关 样式 ， 代 码 如 下 : 
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(8) 在 id="links" 的 <section> 标 签 中 添加 图 片 , 在 <footer> 标 签 中 添加 版 权 信息 , 代码 如 下 : 
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在 样式 文件 中 添加 相关 id 的 样式 设置 ， 代 码 如 下 : 
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完成 以 上 步骤 后 ， 预 览 效果 如 图 4.19 所 示 。 
4.3.2 ”Web 页 面 案例 : 教育 信息 网 站 


此 网 站 案例 添加 了 HTML5 弹性 盒 模型 ,其 排列 与 设置 不 同 于 CSS2 中 的 标准 盒 模型 。 
页 面 设置 依然 采用 目前 流行 的 多 行 样式 ， 将 导航 项 目 与 相关 内 容 索 引 区 域 直接 设计 在 首 
页 内 ， 页 面 结构 如 图 4.22 所 示 。 导 航 采用 项 部 固定 样式 ， 页 面 主要 区 域 都 可 以 通过 单 击 
导航 项 直接 跳 转 ， 首 页 预览 效果 如 图 4.23 所 示 。 





4.22 网 页 结构 示意 图 
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图 4.23 ”预览 效果 
(1) 参照 表 4.5 中 的 标签 设置 ， 初 步 建 立 页 面 基本 结构 。 
表 4.5 页 面 基本 结构 



































标签 说 明 

header id="top" 于 显示 企业 名 称 和 导航 条 
section id="banner" 有 于 显示 首页 大 图 
section id="recommendlist" 职 教 信息 
section id="typelist" 分 类 信息 
section id="contact" 联系 我 们 
footer id="copyright" 版 权 信息 

创建 了 基本 结构 后 ， 在 相应 的 外 层 标 签 内 添加 二 级 标签 结构 ， 完 整 代码 如 下 : 

<1doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 高 职 教 育 信息 网 <title> 

</head> 


<body> 
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(2) 在 CSS 文件 夹 下 创建 样式 文件 style.css, 在 index.html 中 引用 该 文件 , 代码 如 下 : 


在 该 CSS 文件 中 清除 边框 空隙 ， 并 设置 为 弹性 盒 模型 ， 代 码 如 下 : 





“118。 HTML5+CSS3 网 页 设计 案例 教程 


G) 在 id="top" 的 <header> 标 签 内 添加 项 目 列表 并 将 每 一 项 制作 成 链接 , 链接 到 指定 
的 这， 代码 如 下 : 


在 样式 文件 中 设置 顶部 的 logo 和 导航 相关 样式 ， 代 码 如 下 : 
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(4) 在 id="banner” 的 <section> 标 签 中 插入 图 片 , 并 在 CSS 样式 文件 中 设置 图 片 为 自 
适应 图 片 样式 ， 以 及 设置 banner 的 样式 。 
HTML 代码 如 下 : 


CSS 样式 文件 的 内 容 如 下 : 
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(5) 在 id=-'"recommendlist" 的 <section> 标 签 中 完成 以 下 操作 : 
在 class="title-box" 的 <div> 标 签 中 插入 目录 列表 ， 并 制作 成 项 目 列表 ， 将 每 一 项 设置 
成 空 链接 ， 在 其 后 的 class="more" 的 <div> 标 签 中 添加 “更 多 ...” 链 接 ， 代 码 如 下 : 


接 下 来 完成 相关 类 的 样式 设置 ， 代 码 如 下 : 
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参照 以 上 设置 ， 完 成 右 侧 两 栏 的 内 容 制作 和 样式 设置 。 
(6) 找到 id="typelist" 的 <section> 标 签 ， 在 相应 的 <div> 标 签 中 插入 图 片 ， 并 设置 为 图 
片 链 接 ， 其 中 一 个 代码 如 下 ， 其 他 代码 类 似 : 


在 style.css 样式 文件 中 设置 相关 样式 ， 代 码 如 下 : 
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(0) 在 “教学 创新 ”的 <div> 标 签 中 输入 目录 列表 并 设置 为 项 目 列表 ， 同 时 将 每 项 设 
置 为 空 链接 ， 其 他 项 目的 制作 过 程 类 似 。 
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在 样式 文件 中 设置 相关 样式 : 
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(8) 在 id="form" 的 <div> 标 签 中 添加 表单 ， 代 码 如 下 : 


(9) 在 id="info" 的 <article> 标 签 中 添加 联系 信息 和 链接 信息 ， 在 id="copywright" 的 
<footer> 标 签 中 添加 版 权 信息 。 在 CSS 样式 文件 中 完成 对 以 上 内 容 样式 的 设置 , 代码 如 下 : 
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4.3.3 手机 网 站 页 面 : 旅游 网 站 


在 移动 设备 上 浏览 网 页 与 在 PC 上 浏览 网 页 的 主要 区 别 是 ，PC 显示 设备 规格 相对 较 
少 ， 且 比例 种 类 不 多 ， 移 动 设备 显示 设备 尺寸 较 小 ， 同 时 规格 种 类 较 多 。 因 此 ， 针 对 PC 
的 网 页 在 移动 设备 上 显示 时 往往 文字 显示 很 小 ， 不 利于 阅读 ， 或 者 网 页 布局 发 生 错乱 ， 
影响 浏览 者 阅读 。 

随 着 越 来 越 多 的 用 户 采 用 手机 访问 互联 网 ， 因 此 针对 手机 等 移动 设备 的 网 页 ， 或 者 
既 能 够 适应 PC 浏览 器 ， 又 能 够 适应 手机 浏览 器 的 网 站 越 来 越 受 欢迎 。HTMLS5 在 一 些 技 
术 上 考虑 到 了 这 种 应 用 特点 ， 因 此 现在 通过 HTML5 和 CSS3， 要 实现 既 能 够 在 PC 浏览 
器 上 浏览 ， 又 能 够 适应 手机 浏览 器 的 网 页 也 变 得 不 再 困难 。 

以 下 案例 创建 的 旅游 网 站 首页 既 能 够 在 PC 浏览 器 上 正常 浏览 , 也 能 够 适应 手机 屏幕 
较 小 的 特征 。 在 PC 模式 下 ， 网 页 的 布局 依照 目前 主流 的 样式 显示 ， 如 图 4.24 所 示 。 当 
浏览 器 变 小 时 (如 宽度 小 于 768px)， 页 面 重新 排版 ， 形 成 适应 手机 浏览 器 的 浏览 效果 ， 如 
图 4.25 所 示 。 


“126 HTML5+CSS3 网 页 设计 案例 教程 


- oO x 
司 Evxpx4WH5 才 村 记 - C | 怀 刘 






Ni ~ © | EB Fs AR 


x 
SR 





ee 又 是 一 年 花 开 时 ， 丹 网 酌 花 谷 论 朋 预 计 3 月 1 日 开 始 





1 eer. Nm 
图 4.24 在 较 大 浏览 器 窗口 中 的 预览 效果 图 4.25 在 较 小 浏览 器 窗口 


中 的 预览 效果 
(1) 对 于 首页 的 制作 ， 首 先 按照 PC 端 网 页 制作 模式 布局 和 设置 。 


-Tecol-1 { 
width: 33.3%; 
float: left: 

} 

-Tecol-2 { 
width: 33.3%; 
float: left; 

} 

Tecol-3 { 
width: 33.3%; 
float: left: 

} 

Tight { 
width: 70%; 
float: left; 
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(2) 为 了 能 够 适应 不 同 尺寸 的 显示 设备 ， 在 样式 设置 中 添加 以 下 两 部 分 : 


另 一 部 分 通过 媒体 查询 实现 页 面 的 变化 : 
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4.4 本 章 小 结 


本 章 介 绍 了 CSS3 中 弹性 盒 模型 的 基本 概念 ， 以 及 采用 CSS3 进行 布局 时 一 些 新 的 特 
性 、 背 景 、 边 框 、 文 字 特 效 以 及 2D/3D 转换 等 。 重 点 讲解 了 采用 CSS3 实现 响应 式 网 页 设 
计 的 基本 概念 和 相关 技术 , 包括 网 格 布局 、 媒 体 查询 和 响应 式 图 片 等 。 通过 在 Dreamweaver 
中 进行 综合 案例 的 讲解 ， 将 CSS3 样式 表 的 设置 和 使 用 方法 渗透 其 中 ， 便 于 学 习 和 掌握 。 


4.5 ” 课 后 训练 


1. 仿照 3.3.1 节 “Web 页 面 案例 : 企业 网 站 ”中 首页 的 设计 样式 ， 完 成 产品 页 面 的 
设计 ， 样 图 参照 图 4.26。 





图 4.26 参考 图 例 
2. 利用 班级 网 站 的 素材 将 班级 网 站 的 首页 制作 成 响应 式 页 面 。 
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5.1 JavaScript 概述 


HTMLS5 在 动态 交互 方面 的 提高 是 一 次 飞跃 ， 将 HTML5 与 CSS3 以 及 JavaScript 结 
合 在 一 起 后 ， 能 够 实现 非常 复杂 的 应 用 ， 这 是 以 前 版 本 所 不 能 达到 的 应 用 高 度 。 

JavaScript 是 一 种 历史 悠久 的 脚本 语言 ， 大 多 数 情况 下 运行 在 客户 端 ， 也 可 以 在 服务 
器 端 运 行 ， 如 ASP 和 “Node.js。JavaScript 也 是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event 
Driven) 的 脚本 语言 。 一 般 情况 下 ，JavaScript 代码 不 会 被 编译 成 二 进 制 代码 ， 而 是 作为 
HTML 的 一 部 分 由 浏览 器 解释 、 执 行 。 

值得 注意 的 是 ，JavaScript 和 Java 是 由 两 家 公司 开发 的 不 同 产品 。Java 是 Sun 公司 推出 
的 新 一 代 面向 对 象 的 程序 设计 语言 ， 而 JavaScript 是 Netscape 公司 的 产品 ,目的 是 扩展 浏览 
器 功能 。 目 前 JavaScript 已 被 标准 化 为 ECMAScript， 得 到 了 主流 浏览 器 的 支持 。 

例 5.1: 弹出 警告 杠 

在 <body> 标 签 对 之 间 输 入 以 下 代码 : 





JavaScript 脚本 必须 放置 在 <script> 标 签 对 之 间 ，<scrip 亿 标签 可 以 出 现在 HIML 文件 
的 任何 位 置 ， 但 一 般 情况 下 带 <scrip 忆 的 脚本 段 放置 在 一 对 <head> 或 <body> 标 签 之 间 。 在 
<scrip 人 标签 中 ，language 属性 指明 这 段 代码 是 用 JavaScript 编写 的 。alert0 函 数 用 于 弹出 
警告 框 ，Date0O 函 数 用 于 获取 当前 系统 时 间 ， 最 终 的 运行 结果 如 图 5.1 所 示 。 

如 果 在 正 浏览 器 中 运行 程序 ， 会 弹出 如 图 5.2 所 示 的 对 话 框 。 只 有 单 击 “ 人 允许 阻止 
内 容 ” 才 能 运行 脚本 程序 ， 得 到 相应 结果 ， 否 则 浏览 器 会 忽略 JavaScript 脚本 。 


| 


| A The je 2 E2607 GMT 0000 FEED 


[Ec- 纪 | 





图 5.1 弹出 警告 框 
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Internet Explorer 已 隔 制 此 网 页 运行 脚本 或 ActiveX 控件 . 四 
允许 阻止 的 内 容 (A) 


图 5.2 设置 浏览 器 允许 运行 脚本 


5.2 ”JavaScript 应 用 


5.2.1 JavaScript 基本 语法 
1. 基本 语法 


JavaScript 的 语法 借鉴 了 很 多 C 语言 和 Java 的 语法 ， 但 又 不 完全 相同 。 
(1) 通用 要 求 





在 JavaScript 中 定义 的 变量 名 、 方法 名 、 数 组 名 等 符号 , 可 包含 大 小 写字 母 、 数 字 、 
下 画 线 和 美元 符号 ， 但 不 能 以 数字 开头 ， 不 能 是 关键 字 ， 且 严格 区 分 大 小 写 ; 








@ 每 条 功能 执行 语句 必须 以 “; ”结束 ， 语 句 中 的 每 个 词 之 间 用 空格 、 制 表 符 、 
换行 符 或 大 小 括号 等 分 隔 符 隔 开 ; 

@ JavaScript 中 的 注释 分 为 单行 注释 和 多 行 注 释 ， 使 用 /符号 对 单行 信息 进行 注释 ， 
使 用 /#*..….#/ 对 多 行 信息 进行 注释 ， 注 释 信 息 仅 作 说 明 用 途 ， 在 程序 运行 过 程 中 
不 被 执行 。 

(2) 数据 类 型 

@ 字符 串 : 在 JavaScript 中 ,字符 串 可 以 由 任何 合法 字符 组 成 ， 比 如 "123"、'hello'、 
"你 好 "; 

@ 数值， 包括 整数 数值 和 浮 点 型 数值 两 种 ， 主 要 用 于 计算 ; 

@ 布尔 值 : 只 有 true 和 false 两 个 值 ; 

@ ” 空 值 只 有 一 个 值 ， 即 null， 用 来 表示 尚未 存在 的 对 象 。 当 函数 企图 返回 一 个 不 
存在 的 对 象 时 ， 返 回 值 为 null; 

@ 未 定义 值 ， 只 有 一 个 值 ， 即 undefined。 当 声明 的 变量 还 未 被 初始 化 时 ， 变 量 的 
默认 值 为 undefined。 

(3) 变量 














在 JavaScript 中 ， 变 量 的 定义 和 使 用 没有 C 语言 中 那么 严格 ， 采 用 隐 式 定义 时 变量 
不 用 定义 就 可 以 使 用 ， 推 荐 使 用 显 式 定义 的 方式 定义 变量 ， 即 先 定义 后 使 用 。 在 声明 变 
量 的 时 候 ， 要 用 到 关键 字 “var”， 一 般 情 况 下 声明 的 变量 不 需要 定义 类 型 ， 在 使 用 变量 
的 时 候 ， 为 其 赋 的 值 是 什么 类 型 ， 该 变量 就 是 什么 类 型 。 

隐 式 定义 ， 如 : 二 3，s="hello"; 

显 式 定 义 ， 如 : var str="Hello js!"; 

在 JavaScript 中 ， 变 量 类 型 能 够 进行 转换 ， 如 下 所 示 : 


Var a="1.234"; 


























第 5 章 JavaScript 基础 “131。 


Var b=a-1:; 
Var c=atb; 


变量 a 为 字符 串 , 在 计算 a-1 时 , 会 将 a 转换 成 数值 类 型 ， 则 b 为 0.234，c 为 1.468。 
为 了 能 够 在 字符 串 和 数值 之 间 进 行 相 互 转换 , JavaScript 定 义 了 三 种 强制 类 型 转换 的 方法 : 

toString(): 将 布尔 值 、 数 值 等 转换 成 字符 串 。 

parseInt(): 将 字符 串 、 布 尔 值 转换 成 整数 。 

parseFloat(): 将 字符 串 、 布 尔 值 转换 成 浮 点 数 。 

(4) 表达 式 和 运算 符 

JavaScript 语言 中 的 运算 分 为 几 类 ， 每 种 运算 中 都 包含 对 应 的 运算 符号 ， 如 表 5.1 所 
示 ， 在 该 表 中 假定 b=7、x=5、y=4。 

































































表 5.1 运算 符 
分 类 运算 符 意义 示例 运算 结果 
算术 运算 符 Ea 加 A=b+5( 假 设 b=7) a=12 
六 减 A=b-5 a=2 
和 乘 A=b*5 a=35 
/ 除 A=b/5 a=1.4 
% 求 余 数 A=b%5 a=2 
++ 累加 a=++b a=8 
一 递减 a=--b a=6 
比较 运算 符 < 小 于 b<5( 假 设 b=7) false 
> 到 下 b>5 true 
<= 小 于 或 等 于 b<=5 false 
> 一 大 于 或 等 于 b>=5 true 
二 等 于 b=5 false 
二 = 一 全 等 ( 值 和 类 型 ) b=—=5 false 
上 = 不 等 于 b!=5 true 
逻辑 运算 符 && 逻辑 与 X<10&&y>1l true 
| 逻辑 或 S13 true 
! 逻辑 非 !(x—y) true 
赋值 运算 符 = 赋值 X=y x=4 
+= 等 价 于 x=x+y xt=y x=9 
一 等 价 于 x=x-y X=y Xl 
oa 等 价 于 x=x*y x*y x=20 
广 等 价 于 x=x/y x/=y x=1.25 
%= 等 价 于 x=x%y X96=y x=1 
条 件 选 择 符 条 件 表达 式 ? A:B | 表达 式 成 立 , 结果 为 | (x>=y)?a=3:a=5 a=3 
A， 否 则 为 B 











。132。 HTML5+CSS3 网 页 设计 案例 教程 


当 多 种 运算 符 出 现在 同一 表达 式 中 时 ， 按 照 优先 顺序 进行 运算 。 一 般 情 况 下 ， 运 算 
符 的 优先 顺序 按照 由 高 到 低 为 : 算术 运算 (一 元 运算 符 级 别 优先 )、 比 较 运 算 符 、 逻 辑 运算 
符 、 条 件 选择 符 和 赋值 运算 符 。 

(5) 数组 

数组 是 JavaScript 中 的 复杂 数据 类 型 ,是 包含 一 组 同 种 类 型 数据 的 集合 。 在 声明 数组 
变量 的 时 候 ， 数 组 变量 名 的 定义 与 其 他 变量 的 声明 要 求 一 致 ， 但 在 声明 数组 时 需要 对 其 
进行 初始 化 。 


在 对 数组 进行 初始 化 时 可 以 指定 数组 长 度 ， 如 var week = new Array(7)。 如 果 不 指定 
数组 长 度 ， 数 组 长 度 可 以 在 使 用 过 程 中 动态 变化 。 对 于 动态 变化 的 数组 ， 其 长 度 可 以 通 
过 length 属性 获得 。 

例 5.1: 数组 应 用 (运行 结果 如 图 5.3 所 示 ) 
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图 5.3 数组 应 用 
2. 流程 控制 


在 JavaScript 中 ,流程 控制 语句 有 两 大 类 : 条 件 分 支 结构 和 循环 结构 。 这 两 种 控制 结 
构 在 很 多 语言 中 都 有 ， 在 编程 时 非常 常用 。 

(1) 条 件 分 支 结构 

条 件 语句 有 两 种 。 一 种 是 让 else 条 件 语 句 ， 用 于 根据 条 件 判断 执行 不 同 的 语句 。 如 
果 表达 式 的 值 为 mue， 则 执行 语句 1， 和 否则 执行 语句 2。 





例 5.2: 判断 今天 是 工作 日 还 是 周末 休息 日 (运行 结果 如 图 5.4 所 示 ) 
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图 5.4 判断 工作 日 案例 
在 以 上 代码 中 ，(new DateO0).getDayO 用 于 获取 今天 的 星期 值 ，0 为 星期 天 ，6 为 星期 
六 ，1 至 5 对 应 星期 一 至 星期 五 。 
计 语 句 可 以 进行 嵌 套 ， 通 过 嵌 套 可 以 实现 复杂 的 条 件 选择 ， 媒 套 格式 如 下 : 





与 让 语句 嵌 套 功能 相同 的 语句 是 switch 语句 ，swith 比 else 站 结构 更 加 简洁 、 清 晰 ， 
使 程序 的 可 读 性 更 强 。switch 语句 格式 如 下 : 





例 5.3: switch 语句 示例 (运行 效果 如 图 5.5 所 示 ) 
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口 x 
De D - x | owe. x 册 | 分 信人 


于 各 网 由 的 清 息 。 XX 
| 


匡 = 本 | 











图 5.5 switch 语句 示例 
(2) 循环 结构 
循环 是 JavaScript 中 用 于 重复 执行 相同 语句 的 结构 ， 有 for 循环 和 while 循环 两 种 。 
for 循环 一 般 用 于 实现 固定 次 数 的 循环 ， 当 条 件 成 立时 ， 执 行 语句 1， 和 否则 跳出 循环 
体 。 每 循环 一 次 ， 循 环 条 件 按照 设置 的 数量 进行 增加 或 减少 。for 循环 基本 格式 如 下 : 
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例 5.4: 在 页 面 上 循环 输出 标题 Hl 到 H6( 运 行 结果 如 图 5.6 所 示 ) 











Se - DO x 
($$)  - o BR MR ex 人 dg 


5.6 ”循环 输出 标题 Hl 到 H6 
while 循环 和 for 循环 类 似 ， 当 条 件 成 立时 循环 执行 花 括 号 内 的 语句 ， 否 则 跳出 循 
环 。 但 在 循环 条 件 判断 中 没有 更 改 条 件 的 操作 ， 因 此 花 括号 内 的 语句 中 必须 有 能 够 改 
变 循环 条 件 的 操作 语句 ， 否 则 会 进入 无 限 循 环 状态 。while 循环 基本 格式 如 下 : 





例 5.5: 在 页 面 上 循环 输出 标题 Hl 到 H6 





第 5 章 JavaScript 基础 。137 。 





(3) 函数 和 事件 

函数 在 目前 常见 的 计算 机 语言 中 都 是 非常 重要 的 概念 。 通过 函数 可 以 封装 多 条 语句 ， 
在 程序 的 其 他 位 置 进行 调用 ， 它 给 JavaScript 带 来 了 非常 有 效 的 编程 能 力 。 函 数 可 以 简单 
理解 为 一 组 语句 ， 用 来 完成 一 些 工 作 ， 这 些 语句 被 包含 在 特定 的 结构 语句 中 ， 当 程序 需 
要 做 这 些 工作 的 时 候 ， 只 需要 调用 函数 就 可 以 多 次 执行 这 些 动 作 以 完成 相应 的 工作 。 


定义 函数 时 通常 以 关键 字 function 开头 ， 函 数 名 的 命名 方式 与 变量 的 命名 规则 相同 ， 
函数 定义 格式 如 下 : 





例 5.6: 通过 定义 函数 接收 用 户 输入 信息 并 弹出 显示 结果 
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<body> 

</body> 

</html> 

以 上 示例 代码 的 预览 效果 如 图 5.7 所 示 。prompt0 函 数 用 于 弹出 一 个 供用 户 输入 信息 
的 对 话 框 ， 该 函数 的 第 一 个 参数 是 提示 信息 ， 第 二 个 参数 是 默认 值 ， 如 ("你 的 姓名 ?"," 
张 三 ")， 运 行 后 的 结果 如 图 5.8 所 示 。prompt(O) 函 数 的 返回 值 为 用 户 在 该 对 话 框 中 输入 的 
数据 。 














EEC FT 人 四 来 各 网 页 的 消息 x 
pr 
#8 | 
es = 企 你 好, 张 = 先 生 , 欢迎 您 ! 
画 








图 5.7 在 运行 中 接收 用 户 数据 图 5.8 运行 结果 

JavaScript 的 事件 处 理 机 制 是 其 实现 动态 交互 的 主要 方式 ， 所 谓 事件 ， 就 是 Web 页 面 
在 浏览 器 处 于 活动 状态 时 发 生 的 各 种 事情 ， 如 浏览 器 加 载 、 卸 载 页 面 ， 用 户 单 击 鼠 标 、 移 
动 鼠 标 ， 以 及 按 下 键盘 上 的 某 个 键 等 。JavaScript 通过 监听 这 些 事件 的 触发 ， 调 用 相应 的 代 
码 来 执行 一 定 的 功能 ， 比 如 当 用 户 单 击 某 个 按钮 时 ， 打 开 输 入 对 话 框 ， 供 用 户 输入 信息 。 

在 JavaScript 中 ， 事 件 被 触发 后 ， 可 以 执行 JavaScript 代码 ， 这 些 代码 可 以 是 一 条 语 
句 ， 也 可 以 是 函数 ， 通 常情 况 下 事件 调用 的 是 函数 ， 常 用 事件 如 表 5.2 所 示 。 

事件 调用 函数 的 格式 如 下 : 






































on 事件 名 = 事件 处 理 函 数 
表 5.2 常用 事件 
事件 何 时 触发 支持 的 页 面 元 素 
Onclick 鼠标 单 击 时 所 有 元 素 
Ondbclick 双击 鼠标 时 所 有 元 素 
Onchange 显示 的 值 改变 时 表单 元 素 
onfocus 窗口 或 元 素 获得 焦点 时 <body> 和 表单 元 素 
onblur 窗口 或 元 素 失去 焦点 时 <body> 和 表单 元 素 
onload 文档 、 图 像 或 对 象 加 载 完毕 时 <body>、 <frameset>、 <img>、 <iframe> 和 <object> 
onsubmit 提交 表单 时 <form> 
onunload 外 载 文档 时 <body> 和 <frameset> 
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例 5.7: 通过 单 击 按钮 弹出 消息 框 (如 图 5.9 所 示 ) 











EE x 国 














图 5.9 消息 框 示例 
onclick 属性 的 值 为 clickbm0 函 数 ， 具 体 的 实现 代码 在 脚本 中 进行 定义 。 当 用 户 单 击 
该 按钮 时 ， 浏 览 器 会 自动 判断 事件 触发 ， 并 调用 相应 的 函数 ， 执 行 其 中 的 代码 。 


5.2.2 ”JavaScript 内 置 对 象 


JavaScript 也 是 一 种 面向 对 象 编程 语言 , JavaScript 将 一 些 非常 常用 的 功能 预先 定义 成 对 
象 ， 用 户 可 以 直接 使 用 ， 这 种 对 象 就 是 内 置 对 象 。 


1. 常用 对 象 简介 


(1) 浏览 器 对 象 

网 页 和 浏览 器 本 身 的 各 种 元 素 在 JavaScript 程序 中 的 体现 ， 使 JavaScript 可 以 定位 、 
改变 内 容 以 及 展示 HTML 页 面 的 所 有 元 素 。 

(2) Math 数学 对 象 

提供 了 进行 所 有 基本 数学 计算 的 属性 和 方法 。 
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(3) Date 日 期 对 象 

提供 了 获取 、 设 置 日 期 和 时 间 的 属性 和 方法 。 

(4) String 字符 串 对 象 

提供 了 对 字符 串 进行 处 理 的 属性 和 方法 。 

(5) Array 数组 对 象 

用 来 创建 和 使 用 数组 。 

(6) 窗口 (window) 对 象 

window 对 象 处 于 对 象 层次 的 最 顶端 ， 提 供 了 处 理 浏览 器 窗口 的 方法 和 属性 。 

(7) 位 置 location) 对 象 

location 对 象 提供 了 与 当前 打开 的 URL 一 起 工作 的 方法 和 属性 ， 是 静态 对 象 。 

(8) 历史 (history) 对 象 

history 对 象 提供 了 与 历史 清单 有 关 的 信息 。 

(9) 文档 (documenb 对 象 

document 对 象 包含 与 文档 元 素 一 起 工作 的 对 象 ， 它 将 这 些 元 素 封 装 起 来 供 编程 人 员 
使 用 。 

例 5.8: 内 置 对 象 的 用 法 (运行 结果 如 图 5.10 所 示 ) 








3.8 四 舍 五 入 后 为 : 4 
产生 一 个 0-1 之 间 的 随机 数 ，0.46744960501206173 








5.10 内 置 对 象 示例 
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上 面 的 示例 程序 用 到 了 数学 对 象 Math 的 round0 方 法 ， 以 对 数字 进行 四 舍 五 入 。 
Iandom() 方 法 能 产生 随机 数 ， 然 后 用 文档 对 象 Document 的 write0 方 法 将 结果 输出 到 浏览 
器 中 。 


2. 文档 对 象 模型 














浏览 器 对 象 是 最 为 常用 的 对 象 ， 各 种 浏览 器 对 象形 成 了 一 种 层次 模型 ， 被 称 为 文档 
对 象 模型 (Document Object Model， 简 称 DOM)， 如 图 5.11 所 示 。 





Screen 


图 5.11 文档 对 象 模型 

对 应 于 文档 对 象 模型 中 的 层次 关系 ，JavaScript 针对 浏览 器 对 象 采 用 的 是 逐 层 引 用 ， 
例如 : 在 引用 forms 对 象 时 ， 使 用 window.document.forms。 如 果 要 引用 相应 的 属性 ， 就 
在 对 象 的 后 面 加 属性 名 ， 例 如 : 通过 对 象 的 name 属性 来 获取 对 象 的 名 称 。 如 果 要 引用 一 
个 name 属性 为 forml 的 表单 对 象 ， 可 以 使 用 window.document forml 。 

在 文档 对 象 模 型 中 ,有 些 对 象 属于 数组 对 象 ,如 document 对 象 下 一 层 的 images、links、 
forms 等 对 象 ， 在 引用 这 种 数组 对 象 时 ， 可 以 使 用 对 象 在 数组 中 的 位 置 (下 标 ) 来 引用 ， 如 
window.document.forms[0]， 表 示 引 用 文档 中 的 第 一 个 表单 。 

(1) window 对 象 

window 对 象 作为 文档 对 象 模型 中 的 最 顶层 对 象 ，JavaScript 认为 它 是 默认 的 ， 因 此 
可 以 不 写 出 来 , 如 window.document.forms 可 以 写成 document.forms。window 对 象 常用 的 
几 个 方法 用 于 实现 与 用 户 的 交互 ， 这 在 前 面 的 示例 中 用 到 过 ， 这 里 对 其 进行 总 结 。 

e@ alert() 方 法 : 弹出 一 个 显示 信息 的 警示 对 话 框 ， 如 alert(" 您 好 ")。 

@ confirm0 方 法 : 弹出 带 有 提示 信息 的 确认 对 话 框 ， 如 confirm(" 确 认 删 除 吗 ?") 

e ”prompt0 方 法 : 弹出 一 个 带 有 输入 信息 的 对 话 框 ， 如 name=prompt(" 请 输入 你 的 

名 字 ") 

(2) document 对 象 

document 对 象 是 JavaScript 实现 网 页 各 种 功能 中 最 常用 的 基本 对 象 之 一 ， 代 表 浏 览 
器 窗口 中 的 文档 ， 可 以 用 来 处 理 文档 中 包含 的 HIML 元 素 ， 如 表单 、 图 像 、 超 链接 等 。 

document 对 象 的 常用 属性 如 表 5.3 所 示 。 
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表 5.3 document 对象 的 常用 属性 








属性 说 有 明 
document.title 设置 文档 标题 ， 等 价 于 HTML 的 <title> 标 签 
documentbgColor 设置 页 面 背景 色 





document.fgColor 


设置 前 景色 (文本 颜色 ) 

















document.linkColor 未 单 击 过 的 链接 的 颜色 

document.alinkColor 激活 链接 (焦点 在 这 个 链接 上 ) 的 颜色 
document.vlinkColor 已 单 击 过 的 链接 的 颜色 

document.URL 设置 URL 属性 ， 从 而 在 同一 窗口 中 打开 另 一 网 页 





document.fileCreatedDate 


文件 建立 日 期 ， 只 读 属 性 





document.fileModifiedDate 





文件 修改 日 期 ， 只 读 属 性 





document.charset 


document fileSize 





设置 字符 集 ， 简 体 中 文 为 GB2312 
文件 大 小 ， 只 读 属 性 


document 对 象 常用 的 方法 有 write0 .getElementsByName(Name)( 或 getElementsById(ID))、 


createElement(Tag) 等 ， 如 表 5.4 所 示 。 
表 5.4 document 对 象 的 常用 方法 


方 。” 法 


描述 





用 于 动态 向 页 面 写 入 内 容 

















createElement(Tag) 用 于 创建 一 个 html 标签 对 象 
getElementById(ID) 用 于 获得 指定 ID 值 的 对 象 
getElementsByName(Name) 用 于 获得 指定 Name 值 的 对 象 
document.getElementById(ID) 方 法 返回 的 对 象 ， 可 以 通过 表 5.5 中 的 属性 设置 其 文本 
信息 。 
表 5.5 document 对 象 用 于 设置 文本 信息 的 属性 
属 性 描述 

document.getElementById("ID").innerText 动态 输出 文本 





document.getElementById("ID").innerHTML 动态 输出 HIML 





document.getElementById("ID").outerText 同 innerText 





document.getElementById("ID").outerHTML 同 innerHIML 





例 5.9: 动态 改变 文字 内 容 


<ldoctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title> 内 置 对 象 <title> 
<script language="JavaScript"> 
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在 上 面 示 例 中 ,代码 通过 document.getElementById("Ib1") 获 取 第 一 个 标签 的 对 象 ， 并 赋 
给 变量 Ibl1， 再 通过 innerHTML 属性 重新 设置 HTML 标签 中 的 文字 ， 效 果 如 图 5.12 所 示 。 











~ - 0O x SEE 
(S/O 〇 exes p .0 匡 本 及 于 | Sx* 轩 (evan po 太守 时 二]6x* 而 | 


1 
oe: 和 
5.12 动态 改变 文字 内 容 


5.3 ”本章 小 结 


本 章 主要 介绍 了 JavaScript 的 发 展 历史 ， 以 及 JavaScript 的 变量 声明 、 数 据 类 型 、 运 
算 符 、 流 程控 制 语句 、 数 组 与 函数 等 基本 语法 。 通 过 讲解 JavaScript 内 置 对 象 ， 操 作 页 面 
元 素 ， 重 点 讲解 了 JavaScript 内 置 对 象 中 的 文档 对 象 及 其 应 用 。 


5.4 课 后 训练 


1. 编写 JavaScript 代码 , 实现 在 浏览 器 装载 页 面 时 弹出 输入 窗口 , 根据 输入 的 时 间 判 断 
并 输出 英文 月 份 。 

2. 编写 JavaScript 代码 ， 在 浏览 器 中 输出 5 行 6 列 的 表格 。 

3. 参考 图 5.13， 编 写 JavaScript 代码 ， 实 现在 页 面 上 留言 。 
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图 5.13 简单 留言 本 
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HTML5 在 动态 交互 方面 的 提高 是 一 次 飞跃 ， 将 HTML5 与 CSS3 以 及 JavaScript 结 
合 在 一 起 后 ， 能 够 实现 非常 复杂 的 应 用 ， 这 是 以 前 版 本 所 不 能 达到 的 应 用 高 度 。 这 一 章 
通过 介绍 HTML 的 画布 功能 和 JavaScript 脚本 的 基本 语法 ， 实 现在 浏览 器 中 绘制 各 种 图 
形 ， 并 通过 实例 学 习 制作 小 游戏 ， 进 一 步 使 读者 掌握 HIML5 中 交互 功能 的 实现 。 


6.1 _ HTMLS 画布 的 应 用 


通过 HTML5 的 Canvas 元 素 ( 也 被 称 为 画布 元 素 )， 可 以 在 浏览 器 中 绘制 从 基本 图 
形 元 素 到 复杂 动画 的 诸多 应 用 ， 目 前 主流 的 网 页 设计 中 已 经 大 量 采 用 基于 HTML5 的 
动画 来 蔡 代 原 有 的 Flash 动画 ,大量 的 商务 网 站 采用 HIML5 的 画布 元 素来 绘制 各 种 统 
计 图 表 ， 展 示 商 业 信息 。 


6.1.1 Canvas 简介 


在 HIMLS 的 Canvas 出 现 之 前 ,网 页 设计 人 员 要 在 网 页 上 绘制 图 形 , 可 以 通过 Flash 
或 SVG(Scalable Vector Graphics， 可 伸缩 矢量 图 形 ) 插 件 来 实现 ， 或 者 采用 一 些 其 他 的 
标记 语言 来 实现 。 苹 果 公 司 在 提出 Canvas 的 概念 后 ， 为 W3C 采用 并 设计 和 实现 了 
Canvas 图 形 绘制 API。 


1. 什么 是 Canvas 


Canvas 元 素 在 HTML 文件 中 出 现时 与 其 他 标签 没有 本 质 的 区 别 , 默认 情况 下 Canvas 
标签 出 现在 页 面 上 的 时 候 , 页 面 上 会 形成 一 个 宽度 为 300px、 高 度 为 150px 的 矩形 区 域 上 
于 绘制 图 形 ， 当然 这 个 矩形 的 宽 高 也 可 以 由 用 户 设置 。Canvas 元 素 本 身 并 不 能 绘制 图 形 ， 
只 能 通过 使 用 脚本 (通常 是 JavaScript) 来 完成 绘制 。 

例 6.1: 在 页 面 上 添加 一 个 Canvas 元 素 

(1) 首先 在 <body> 标 签 对 之 间 输 入 Canvas 元 素 的 标记 ， 并 设置 id 为 “myCanvas”、 宽 
度 为 400px、 高 度 为 300px， 代 码 如 下 : 

<canvas id—"myCanvas" width="400" height="300"> 

该 浏览 器 不 支持 HTMLS5 canvas 标签 。 

</canvas> 












































在 Dreamweaver 的 设计 视图 中 可 以 看 到 画布 的 显示 区 域 , 但 在 浏览 器 中 看 不 到 画布 ， 
如 图 6.1 所 示 。 
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<html> 
<head> 


<meta charset="utf-8"> 








图 6.1 在 Dreamweaver 中 插入 <canvas> 标 签 
(2) 在 <canvas> 标 签 中 添加 一 个 新 的 属性 style， 将 其 值 设 置 为 如 下 所 示 : 


通过 添加 以 上 属性 ， 将 画布 的 边框 样式 设置 为 lpx 的 实 线 、 颜 色 为 红色 ， 在 浏览 器 
中 的 显示 效果 如 图 62 所 示 。 
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图 6.2 带 边框 的 画布 的 预览 效果 


(3) 在 <canvas> 标 签 后 面 添加 JavaScript 脚本 ， 实 现在 画布 中 绘制 一 条 线段 ， 代 码 如 
下 ， 在 浏览 器 中 的 预览 效果 如 图 6.3 所 示 。 
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图 6.3 在 画布 中 绘制 线段 


在 以 上 JavaScript 代码 中 ， 首 先 通过 document.getElementById(myCanvas) 获 取 Canvas 
对 象 ， 并 创建 getContext(2d) 对 象 ， 该 对 象 是 HTMLS 的 内 置 对 象 ， 提 供 了 绘制 路 径 、 和 矩形 、 
圆 形 、 字 符 以 及 添加 图 像 的 方法 ， 参 数 2d 定义 画布 的 对 象 为 二 维 绘图 。 接 下 来 采用 绝对 坐 
标 方式 创建 路 径 ， 以 及 线段 的 两 个 端点 ， 最 后 通过 stroke0 方 法 将 直线 绘制 在 画布 上 。 


2. Canvas 的 坐标 系统 
对 于 Canvas 的 二 维 网 格 系统 ， 坐 标 系 左上 和 角 的 坐标 为 (0.0)， 如 图 6.4 所 示 。 














(0,0) 


图 6.4 画布 的 坐标 系统 

在 上 面 示例 中 ， 线 段 左 上 角 的 坐标 为 (100,100)， 右 下 角 的 坐标 为 (240,240)。 后 面 各 
个 示例 中 的 坐标 都 以 此 坐标 系 为 准 。 
6.1.2 ”绘制 基本 图 形 

1. 绘制 简单 图 形 

Canvas 提供 了 基础 图 形 的 绘制 功能 ， 能 够 绘制 直线 段 、 圆 、 圆 弧 、 和 矩形 等 多 种 图 形 ， 
以 下 通过 实例 介绍 常见 基本 图 形 的 绘制 。 

例 6.2: 绘制 线段 

在 画布 上 绘制 三 条 线段 ， 如 图 6.5 所 示 。 
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图 6.5 绘制 线段 


代码 如 下 : 





与 上 一 个 示例 相 比 ， 以 上 代码 多 做 了 两 件 事 。 首 先 用 context 的 strokeStyle0 方 法 设 
置 所 绘制 线段 的 颜色 ， 等 号 后 面 用 rgb(250.0.0) 将 线条 的 颜色 设置 为 红色 ， 然 后 用 context 
的 moveTo() 方 法 为 画笔 设置 新 的 起 点 。 

例 6.3: 绘制 圆 弧 和 路 径 

在 画布 上 绘制 两 条 圆 弧 ， 并 填充 内 部 ， 再 绘制 一 个 圆 ， 预 览 效 果 如 图 6.6 所 示 。 
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6.6 圆 弧 和 路 径 
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代码 如 下 : 





beginPath() 方 法 用 于 定义 一 条 路 径 的 开始 或 重 置 当前 的 路 径 ， 之 后 使 用 其 他 的 方法 
(moveTo0、lineTo0、quadricCurveTo0、PbezierCurveTo0 、arcTo0 以 及 arc0 等 ) 来 创建 路 
径 ， 最 后 使 用 stroke0 方 法 在 画布 上 绘制 确切 的 路 径 。 与 其 对 应 的 closePath0 方 法 用 于 关 
闭路 径 。 

在 Canvas 中 用 arc(0 方 法 绘制 圆 弧 或 圆 , arc(x,y,r,sAngle,eAngle,counterclockwise) 方 法 
有 7 个 参数 , 参数 x 和 y 为 圆 弧 的 圆心 坐标 , 参数 r 为 圆 弧 的 半径 , 参数 sAngle 和 eAngle 
分 别 为 所 绘制 圆 弧 的 起 始 角度 和 结束 角度 ， 角 度 以 Math PI 的 倍数 表示 ， 如 2*Math.PI 为 
360°( 整 圆 )，1.5*MathPI 为 90”( 四 分 之 一 圆 )， 如 图 6.7 所 示 。 最 后 一 个 参数 
counterclockwise( 可 选项 ) 表 示 角 度 的 旋转 方向 ， 人 flse 为 顺 时 针 ，true 为 逆 时 针 。 
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6.7 ” 圆 弧 绘制 角度 示意 图 
例 6.4: 绘制 矩形 (运行 结果 如 图 6.8 所 示 ) 
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6.8 绘制 矩形 


代码 如 下 : 
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绘制 矩形 有 两 种 方式 ， 一 种 是 填充 矩形 ， 另 一 种 是 矩形 框 ， 当 然 也 可 以 将 这 两 种 结 
合 在 一 起 。 在 绘制 填充 矩形 之 前 ， 首 先 给 fillStyle 属性 设置 填充 样式 ， 该 属性 可 以 设置 为 
颜色 值 (如 red 或 rgba(255.0.0.0.2))， 默 认为 黑色 。 在 上 述 示例 中 ， 上 排 第 一 个 矩形 采用 默 
认 方式 填充 ， 上 排 第 二 个 矩形 的 填充 色 为 红色 。 

上 排 第 三 个 矩形 将 填充 样式 设置 为 渐变 ， 在 填充 矩形 前 ， 需 要 用 相应 的 方法 创建 渐 
变 ， 这 里 用 createLinearGradient(0) 方 法 创建 线性 渐变 ， 参 数 为 渐变 的 起 始点 和 终止 点 的 坐 
标 。 创 建 渐变 时 ， 还 需要 用 addColorStop0 方 法 添加 渐变 的 颜色 。 

下 排 第 一 个 矩形 使 用 strokeRect() 方 法 绘制 矩形 的 边框 ， 但 不 填充 颜色 。 在 绘制 前 ， 
需要 通过 strokeStyle 属性 设置 笔触 的 颜色 、 渐 变 或 模式 。 下 排 第 二 个 矩形 分 别 采 用 不 同 
的 颜色 同时 绘制 边框 和 填充 内 部 。 

在 绘制 矩形 时 ， 可 以 用 clearRect( 方 法 清空 给 定 和 矩形 内 的 指定 像素 , 下 排 最 后 一 个 矩 
形 内 部 的 空白 区 域 就 是 采用 该 方法 实现 的 。 


2. 绘制 图 表 


通过 HTMLS5 的 Canvas 基本 图 形 可 以 绘制 出 复杂 的 图 形 ， 比 如 商业 统计 中 常用 的 各 
种 图 表 。 绘制 图 表 是 对 Canvas 的 基本 图 形 加 以 综合 应 用 的 过 程 , 每 一 个 图 表 都 由 各 种 点 、 
线段 、 矩 形 或 扇形 组 成 。 

例 6.5: 绘制 折线 图 (效果 如 图 6.9 所 示 ) 
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图 6.9 折线 图 
这 个 图 表 的 绘制 过 程 分 以 下 几 步 完成 : 
(1) 创建 Canvas 画布 ， 将 id 设置 为 “myCanvas”、 宽 度 设 置 为 400px、 高 度 设置 为 
300px。 
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(2) 在 JavaScript 脚本 中 获取 画布 对 象 并 进行 设置 。 


(3) 初始 化 图 表 数 据 ， 创 建 两 个 数组 ，nums 为 纵 坐 标 数据 ，datas 为 横 坐 标 数据 。 





(4) 绘制 出 坐标 线 。 





(5) 绘制 折线 。 


(6) 绘制 折线 点 的 菱形 和 数值 、 横 坐标 值 和 纵 坐 标 值 。 
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例 6.6: 绘制 饼 图 (效果 如 图 6.10 所 示 ) 
OO Ge 























图 6.10 饼 图 
饼 图 的 绘制 其 实 是 绘制 扇形 的 过 程 ， 绘 制 扇形 需要 用 到 圆 弧 的 绘制 方法 。 扇 形 由 两 
条 线段 和 一 段 圆 弧 连 接 而 成 , 因此 最 终 需 要 使 用 路 径 将 其 连接 到 一 起 , 预览 效果 如 图 6.10 
所 示 。 具 体 实现 过 程 是 ， 采 用 函数 对 绘制 过 程 进行 封装 ， 并 将 函数 的 代码 放置 在 <head> 
标签 内 。 
(1) 在 <body> 标 签 中 添加 <canvas> 标 签 并 设置 id 与 边框 信息 ， 具 体 代 码 如 下 : 
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CO) 在 <head> 标 签 内 添加 脚本 标记 , 并 编写 绘制 饼 图 的 函数 drawCake0, 具体 代码 如 下 : 
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G) 初始 化 函数 。 





(4) 当 JavaScript 脚本 在 <canvas> 标 签 之 前 时 , 可 以 用 页 面 装 载 事件 调用 和 执行 函数 ， 
因此 在 脚本 代码 的 最 后 加 入 如 下 一 行 : 





例 6.7: 绘制 柱 形 图 
柱 形 图 是 非常 常用 的 一 种 图 表 ， 通 过 HIMLS 的 画布 绘制 柱 形 图 的 原理 是 ， 根 据 数 
据 绘制 相应 比例 的 矩形 。 在 此 例 中 ， 除 了 绘制 柱 形 图 之 外 ， 还 绘制 了 渐变 的 背景 和 横向 
的 坐标 线 ， 预 览 效果 如 图 6.11 所 示 。 

















6.11 柱 形 图 


有 具体 步骤 如 下 : 
(1) 定义 画布 对 象 ， 具 体 参数 设置 如 下 所 示 : 
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(2) 定义 图 表 绘制 函数 。 
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G) 用 页 面 装载 事件 调用 和 执行 函数 。 
adowaoadrdarat 


3. 变换 Canvas 对 象 


HTMLS 的 Canvas 对 象 除了 提供 上 面 介绍 的 绘制 基本 图 形 的 方法 外 ， 还 提供 了 图 形 的 
变换 功能 ， 如 图 形 的 平移 、 旋 转 和 缩放 等 。 通 过 这 些 功能 可 以 实现 更 为 复杂 的 图 形 效果 。 
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(1) 平移 图 形 

通过 translate(x,y) 方 法 实现 对 图 形 的 平移 ， 其 中 参数 x 是 指 沿 X 轴 的 平移 量 ,， 参数 y 
是 沿 Y 轴 的 平移 量 。 

例 6.8: 绘制 一 个 矩形 并 向 右 下 方 平移 





经 过 平移 变换 以 后 ( 即 执行 contexttranslate(100,100) 后 )， 坐 标 系 的 原点 也 跟着 变化 。 
如 果 再 进行 绘图 或 平移 ， 系 统 就 会 基于 刚才 变换 后 的 坐标 系 进行 绘制 或 变换 。 如 果 不 希 
望 受 变 换 的 影响 ， 就 需要 在 平移 之 前 用 save0 方 法 存储 坐标 ， 在 绘制 完成 后 用 restore() 方 
法 恢复 坐标 。 将 上 述 代码 修改 成 如 下 就 会 更 加 合理 : 


(2) 旋转 图 形 

对 图 形 旋转 的 时 候 需要 两 个 步骤 。 首先 用 translate(x,y) 方 法 重新 定义 画布 上 原点 的 位 
置 , 然后 用 rotate(a) 方 法 进行 旋转 , 该 方法 用 到 的 参数 a 可 以 用 数学 函数 计算 获得 , 如 45° 
可 以 用 45*Math.PL180 表示 ， 注 意 计算 得 到 的 角度 单位 是 弧度 。 在 用 rotate0 方 法 旋转 之 
后 才能 绘图 。 
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图 6.12 


旋转 图 形 


例 6.9: 绘制 一 个 旋转 45° 的 正方 形 (预览 效果 如 图 6.12 所 示 )。 





(3) 缩放 图 形 


图 形 的 缩放 要 用 到 scale(x,y) 方 法 , 参数 x 是 指 义 轴 的 缩放 值 , 参数 y 是 指 Y 轴 的 缩 


放 值 。 


例 6.10: 先 绘制 一 个 边 长 为 50 的 矩形 ， 再 绘制 一 个 边 长 是 它 两 倍 的 矩形 (预览 效果 


如 图 6.13 所 示 ) 
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tt 口 x 
(© ) Oh D ~ © | GE Cove x 国 | Se© 


























图 6.13 缩放 图 形 


代码 如 下 : 





(4) 变换 矩阵 

矩阵 变换 是 图 形 处 理 中 非常 常用 的 操作 ， 在 很 多 语言 中 需要 用 户 自己 完成 矩阵 变换 
算法 的 实现 ， 在 Canvas 的 API 中 只 需要 调用 相关 方法 就 可 以 实现 复杂 的 变换 。 
transform(a,b,c,d.e. 方 法 的 参数 较 多 ， 其 中 a 表示 水 平 缩放 比例 ，b 表示 水 平 倾斜 角度 ，c 
表示 垂直 倾斜 角度 ，d 表示 垂直 缩放 比例 ，e 表示 水 平 位 移 量 ,f 表示 垂直 位 移 量 。 经 过 
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变换 以 后 ， 坐 标 系 会 跟着 变化 ， 因 此 在 使 用 该 方法 前 ， 可 以 用 save0 方 法 保存 状态 , 之 后 
用 restore() 方 法 恢复 状态 。 也 可 以 用 setTransform(a,b,c,d,e, 人 方法 重 置 画 布 的 坐标 系 ， 如果 
需要 重 置 ， 参 数 可 以 按照 setTransform(1,0,0,1,0,0) 进 行 设置 。 

例 6.11: 对 拢 形 进行 旋转 和 平移 变换 (预览 效果 如 图 6.14 所 示 ) 














= 
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6.14 ”变换 矩阵 


代码 如 下 : 
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ctx.fillStyle="yellow"; 
ctx.setTransform(1,0,0,1,200,0); 
ctx.filIRect(40,40,120,60): 

上 

window.onload=cxt_ transform 


<canvasid="myCanvas"width="400"height="300"style="border:black1pxsolid"></canvas> 

body> 

</html> 

setTransform() 和 transform() 方 法 之 间 的 差别 在 于 ，setTransform() 方 法 会 重 置 上 次 变换 ， 
然后 重新 构建 新 的 变换 矩阵 ， 而 transform() 方 法 直接 在 上 次 变换 的 基础 上 构建 新 的 变换 。 

(5) 合成 

在 同一 画布 上 同时 出 现 两 个 图 形 ， 当 这 两 个 图 形 处 在 一 种 相互 覆盖 和 从 加 的 位 置 时 ， 
这 两 个 图 形 可 以 通过 不 同 的 组 合 方式 形成 不 同 的 效果 。 通 过 设置 globalComposite 
Operation 属性 可 以 实现 多 种 组 合 方式 ， 该 属性 的 取 值 与 组 合 效 果 如 表 6.1 所 示 。 

表 6.1 各 种 组 合 效果 示意 图 
取 值 组 合 效果 示意 图 


这 是 默认 的 组 合 方式 ， 后 绘制 的 图 
多 覆盖 先前 绘制 的 图 形 


SOUICe-OVeT 





后 绘制 的 图 形 与 先前 绘制 的 图 形 不 
source-atop 重合 的 部 分 不 会 显示 出 来 ， 重 合 的 
部 分 覆盖 先前 的 图 形 








只 显示 后 绘制 的 与 先前 绘制 重 私 的 
部 分 ， 其 他 部 分 都 不 显示 


source-in 











取 值 
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( 续 表 ) 





source-out 


只 显示 后 绘制 图 形 不 重 三 的 部 分 ， 
先前 绘制 的 图 形 不 显示 





destination-over 


destination-atop 


destination-in 


destination-out 


先 绘制 图 形 的 位 置 在 后 绘制 图 形 
的 上 面 ， 与 source-over 刚好 相反 


显示 后 绘制 的 图 形 区 域 , 对 于 与 先 
前 绘制 图 形 重 车 的 部 分 ， 显示 先前 
绘制 的 图 形 部 分 ,先前 绘制 图 形 不 
重合 的 部 分 则 不 显示 


只 显示 两 个 图 形 重 且 的 部 分 , 且 先 
前 绘制 的 部 分 覆盖 后 绘制 的 部 分 ， 
其 他 部 分 不 显示 


只 显示 先前 绘制 图 形 不 重奏 的 部 
分 ， 其 余 都 不 显示 





lighter 





重 辣 部 分 的 颜色 为 混合 之 后 的 颜 
色 ， 不 重 闪 部 分 的 颜色 正常 显示 
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( 续 表 ) 
取 值 组 合 效 果 





只 显示 重 营 部 分 , 且 是 后 绘制 图 形 
三 的 部 分 ,画布 上 其 他 的 内 容 会 
忽 





copy EE 





对 两 个 图 形 进 行 异 或 运算 , 重 登 部 


XOT 训 站 el 
分 不 显示 ， 其 他 部 分 显示 








在 实际 使 用 时 , globalCompositeOperation 属性 需要 放置 在 绘制 两 个 图 形 的 代码 之 间 ， 
才 会 有 效果 。 也 就 是 说 ， 对 属性 赋值 后 ， 才 会 影响 到 以 后 的 图 形 组 合 效果 。 
ctx.fillStyle="green"; 
ctx.fillRect(190,40,100,100); 
ctx.globalCompositeOperation="source-in"; 
ctx.fillStyle="blue"; 
ctx.fillRect(210,60,100,100): 


6.1.3 ”使 用 特效 


Canvas 提供 了 基本 的 绘图 功能 ， 将 这 些 基 本 功能 结合 复杂 的 图 形 处 理 算法 后 ， 可 以 
实现 非常 绚烂 的 特效 ， 如 各 种 粒子 效果 、 各 种 动态 文字 、 各 种 3D 效果 。 在 粒子 效果 的 诸 
多 应 用 中 ， 雪 花 飘 飞 是 最 为 常见 的 一 种 特效 ， 原 理 较 为 简单 ， 随 机 产生 大 小 不 同 的 雪花 ， 
并 在 画布 上 实现 雪花 沿 着 曲线 向 下 运动 ， 最 终 形成 一 种 雪花 飘落 的 效果 。 

首先 通过 完成 单个 雪花 直线 下 落 的 过 程 来 理解 此 动画 的 实现 原理 ， 这 个 简单 的 动画 
是 雪花 漫天 飞舞 特效 的 原始 动画 ， 通 过 这 个 动画 的 实现 可 以 学 习 动画 制作 过 程 中 用 到 的 
主要 技术 。 雪 花 可 以 用 一 个 小 球 表示 ， 小 球 下 落 的 过 程 是 通过 不 断 更 改 小 球 的 纵 坐 标 ， 
同时 擦 除 原来 绘制 的 图 形 ， 最 终 形成 小 球 下 落 的 效果 。 

在 这 里 主要 用 到 两 个 方法 : clearRect0 和 setInterval()。clearRect0 方 法 用 于 清除 指定 
和 矩形 区 域内 的 像素 ， 这 是 实现 动画 效果 的 非常 重要 的 一 步 。 动 画 产 生 的 过 程 实际 是 不 断 
绘制 新 图 形 并 擦 除 旧 图 形 的 循环 过 程 ， 从 而 给 人 在 视觉 上 形成 动态 变化 的 效果 。 在 实现 
循环 过 程 时 ， 这 里 并 没有 使 用 循环 语句 ， 而 是 用 setInterval0 方 法 来 实现 。 该 方法 按照 指 
定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 。setInterval0 方 法 会 循环 调用 函数 ， 直 
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到 clearInterval( 方法 被 调用 或 窗口 被 关闭 。 
例 6.12: 单个 雪花 的 直线 飘落 效果 
(1) 在 <body> 标 签 对 中 插入 <canvas> 标 签 ， 代 码 如 下 : 


这 里 不 设置 画布 的 宽度 和 高 度 ， 在 后 面 的 JavaScript 中 实现 对 画布 范围 的 设置 。 
(2) 设置 CSS 样式 表 ， 设 置 背景 颜色 和 画布 的 样式 ， 具 体 代码 如 下 : 


(3) 在 <head> 标 签 对 中 输入 JavaScript 脚本 ， 实 现 小 球 的 直线 下 落 ， 有 具体 代码 如 下 : 
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上 面 的 示例 实现 了 单个 雪花 的 飘落 效果 ,直线 轨 迹 并 不 像 真 实 的 雪花 飘 下 来 的 效果 ， 
给 雪花 的 下 落 轨迹 加 一 些 变化 效果 会 更 好 。 这 里 不 仅 要 改变 纵 坐标 ， 还 要 给 横 坐 标 添加 
一 些 变化 ， 但 并 不 是 简单 添加 固定 的 偏 移 量 ， 而 是 用 三 角 函 数 计算 得 到 非 线 性 的 增 量 ， 
从 而 模拟 出 雪花 随 风 飘落 的 效果 。 

例 6.13: 单个 雪花 的 曲线 球 落 效果 

此 例 只 需要 在 上 一 个 示例 的 基础 上 添加 一 些 新 的 代码 即 可 ， 具 体 代码 如 下 : 





通过 以 上 示例 ， 单 个 雪花 的 球 落 效果 已 经 比较 真实 了 。 下 一 步 就 是 在 画布 上 绘制 更 
多 大 小 不 同 的 雪花 ， 它 们 随机 出 现在 不 同 的 位 置 并 飘落 ， 效 果 如 图 6.15 所 示 。 
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图 6.15 漫天 飞 雪 效 果 图 
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完整 代码 如 下 : 





HTML5+CSS3 网 页 设计 案例 教程 





第 6 章 HTML5 高 级 应 用 。169。 





要 做 出 各 种 特效 ， 图 形 处 理 算法 是 关键 ， 往 往 这 些 算法 非常 复杂 ， 对 于 初学 者 或 一 
般 用 户 来 说 自行 编写 非常 困难 。 目 前 解决 这 个 问题 的 方法 之 一 ,就 是 采用 已 有 的 JavaScript 
框架 或 库 ， 快 速 调用 它们 提供 的 相关 功能 ， 实 现 一 些 特殊 效果 。 

目前 的 JavaScript 框架 种 类 非常 多 ， 从 使 用 较 早 、 成 熟 度 高 的 jQuery 框架 到 后 起 之 
秀 Vue 框架 ， 它 们 各 有 千秋 ， 都 拥有 一 定 的 客户 群 。 


1. jQuery 


jQuery 是 较 早 开发 出 来 的 框架 , 也 是 目前 非常 流行 的 一 种 JavaScript 框架 , 很 多 框架 
都 在 其 基础 上 发 展 变化 而 来 (如 BootStrap)， 很 多 项 目 和 网 页 中 都 用 到 了 jQuery 框架 。 
jQuery 提倡 写 更 少 的 代码 ， 做 更 多 的 事情 。 jQuery 封装 了 JavaScript 的 常用 功能 ， 优 化 了 
对 HTML 文档 的 操作 ， 以 及 事件 的 处 理 、 动 画 设计 与 Ajax 交互 ， 因 此 采用 jQuery 设计 
和 实现 复杂 的 动画 特效 比 用 原生 JavaScript 代码 编写 特效 算法 的 效率 高 很 多 。 

例 6.14: 用 jQuery 框架 实现 下 拉 菜 单 

(1) 在 Dreamweaver 中 制作 菜单 布局 ， 如 图 6.16 所 示 。 菜 单 的 制作 分 为 两 部 分 ， 首 
先 通过 列表 制作 导航 条 ， 在 包含 下 拉 菜 单 的 导航 项 中 嵌入 列表 以 及 相应 的 列表 项 。 











6.16 制作 导航 条 与 下 拉 菜 单项 
以 下 是 CSS 样式 代码 : 
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以 下 是 HTML 代码 : 
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(2) 引用 jQuery。 
jQuery 实质 上 是 一 个 JavaScript 代码 库 , 在 使 用 其 提供 的 各 种 功能 前 , 需要 将 其 引入 
相应 页 面 ， 代 码 如 下 : 


G3) 编写 下 拉 菜 单 的 代码 ， 预 览 效果 如 图 6.17 所 示 。 首 先 用 $("d1").hide0 将 所 有 的 d 列 
表 项 隐藏 起 来 ， 当 导航 的 列表 项 “limainmenu ”触发 hover 事件 时 ( 即 鼠 标 滑 过 该 列表 项 时 )， 
通过 find() 方 法 查找 “dl” 并 将 该 列表 项 通过 slideDownO 弹 出 下 拉 菜 单 中 的 列表 项 。 
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图 6.17 下 拉 菜 单 

(4) Three.js 

Threejs 是 基于 JavaScript 的 3D 引擎 ， 可 以 在 浏览 器 中 实现 三 维 建 模 和 演 染 ， 创 建 
各 种 三 维 场景 ， 包 括 摄影 机 、 光 影 、 材 质 等 各 种 对 象 。Threejs 是 一 个 功能 完善 且 易 用 的 
图 形 库 ， 是 对 WebGL 接口 的 封装 与 简化 。WebGL 是 基于 OpenGL 设计 的 面向 Web 的 图 
形 标 准 ， 提 供 了 一 系列 JavaScript API， 通 过 这 些 API 进行 图 形 泻 染 ， 可 充分 利用 图 形 硬 
件 ， 从 而 获得 较 高 性 能 。 目 前 Three.js 还 处 在 发 展 阶段 。 

例 6.15: 绘制 旋转 的 立方 体 

在 浏览 器 中 绘制 一 个 立方 体 ， 并 对 其 进行 旋转 ， 效 果 如 图 6.18 所 示 。 














图 6.18 旋转 立方 体 
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6.2 综合 应 用 案例 


6.2.1 绘制 卡通 头像 


HIMLS 的 画布 提供 的 绘图 功能 虽然 只 是 提供 最 基本 的 绘图 手段 ， 但 经 过 组 合 后 ， 可 
以 绘制 出 很 复杂 的 图 形 。 本 节 就 利用 多 画布 的 方式 模拟 绘图 软件 (如 Photoshop) 中 图 层 的 
功能 ， 结 合 基 本 绘图 功能 绘制 卡通 头像 ， 绘 制 完 成 的 效果 如 图 6.19 所 示 。 
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例 6.16: 绘制 卡通 头像 














图 6.19 卡通 头像 绘制 效果 
(1) 在 页 面 上 创建 三 个 相同 的 画布 对 象 ， 分 别 命名 为 “layerl” “layer2”“layer3”， 
其 他 设置 完全 一 致 ， 具 体 代码 如 下 : 


默认 情况 下 ， 这 三 个 画布 对 象 并 列 显示 在 页 面 上 ， 在 后 续 步骤 中 会 对 三 者 进行 重 登 。 

(2) 此 例 中 大 量 运 用 椭圆 来 绘制 卡通 的 相关 部 位 ，Canvas 并 不 提供 绘制 椭圆 的 方法 ， 
这 里 自 定义 一 个 绘制 椭圆 的 函数 。 这 里 绘制 椭圆 的 方法 是 对 圆 压缩 ， 因 此 用 到 了 前 面 提 
到 的 scale() 方 法 。 

EllipseO) 函 数 用 于 绘制 带 有 边框 的 椭圆 ， 边 框 的 颜色 与 填充 的 颜色 可 以 不 一 致 ， 其 中 
x 和 Yy 为 中 心 坐标 ，a 和 为 椭圆 的 长 轴 和 短 轴 ，fcolor 为 填充 颜色 ，scolor 为 边框 颜色 。 
EllipseArea() 函 数 绘制 没有 边框 的 椭圆 。 
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(3) 创建 绘制 卡通 头像 的 函数 draw_bear0)， 具 体 代 码 如 下 : 
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在 绘制 小 能 头像 时 ， 用 三 个 画布 对 象 模拟 图 层 的 方式 实现 县 如。 默认 状态 下 ， 三 个 
画布 是 并 排 排 列 的 ， 并 没有 重合 在 一 起 ， 为 了 让 三 个 画布 对 象 重 倒 起 来 ， 需 要 对 它们 的 
相关 属性 进行 设置 。 画 布 对 象 的 style position 用 于 设置 画布 的 位 置 ， 在 这 里 将 其 设置 为 
absolute， 就 可 以 将 三 个 画布 对 象 重合 在 一 起 。 


小 熊 头像 的 耳 条 、 脸 和 眼睛 在 第 一 个 画布 对 象 中 (可 以 认为 是 最 底层 的 图 层 ), 各 图 形 
之 间 按 照 先后 顺序 进行 覆盖 ， 位 置 关系 比较 简单 ， 组 合 模式 按照 默认 模式 即 可 。 

小 熊 嘴 部 的 白色 区 域 其 实 由 两 个 椭圆 组 合 而 成 ， 采 用 source-in 的 组 合 模式 。 之 所 以 
将 其 单独 放 在 一 个 画布 对 象 中 ， 是 由 于 采用 source-in 的 组 合 模式 后 ， 在 画布 中 绘制 的 其 
他 图 形 都 被 清除 ， 因 此 将 其 放 在 单独 的 画布 对 象 中 。 

(4) 最 后 ， 在 脚本 的 后 面 加 一 句 窗口 加 载 时 调用 绘制 函数 的 代码 。 


6.2.2 ”制作 小 游戏 


在 网 页 游戏 制作 领域 HTML5+JavaScript 已 经 完全 代替 Flash 的 地 位 ， 并 且 已 经 有 
针对 游戏 开发 的 JavaScript 框架 或 函数 库 可 以 利用 。 本 节 通 过 一 个 小 游戏 介绍 
HTML5+JavaScript 在 游戏 制作 中 的 应 用 。 

例 6.17: 转盘 抽奖 小 游戏 

游戏 的 初始 画面 如 图 6.19 所 示 ， 在 单 击 圆 盘 后 ， 圆 盘旋 转 并 随机 停 到 某 个 位 置 ， 如 
图 6.20 所 示 ， 指 针 指向 中 奖 区 域 。 程 序 分 以 下 几 个 步 又 完成 : 

(1) 定义 画布 对 象 ， 在 <body> 标 签 中 定义 Canvas 对 象 ， 在 其 单 击 事件 中 指明 单 击 画 
布 时 调用 的 函数 ， 具 体 代码 如 下 : 


HTML5+CSS3 网 页 设计 案例 教程 


CO) 编写 游戏 脚本 ， 这 分 几 个 函数 来 实现 。 首 先 初 始 化 游戏 数据 ， 具 体 代码 如 下 : 


在 初始 化 过 程 中 ， 将 转盘 中 的 数据 和 转盘 各 部 分 的 颜色 值 存储 在 数组 中 ， 定 义 转盘 
的 初始 角度 为 0， 设 置 8 个 区 域 ， 因 此 每 段 弧 的 度数 为 八 分 之 一 圆周 ， 即 Math.PI / 4。 
(3) 定义 绘制 圆 盘 的 函数 ， 具 体 代码 如 下 : 
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(4) 定义 旋转 圆 盘 的 函数 。 
圆 盘 的 旋转 由 三 个 函数 完成 : rotateWheel0 函 数 用 来 旋转 ，stopRotateWheel0 函 数 用 
来 停止 旋转 ，easeOut0 函 数 用 于 擦 除 上 一 个 画面 。 
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(5) 定义 单 击 函 数 。 
当 用 户 单 击 画布 时 ， 调 用 hit0 函 数 ， 随 机 产生 旋转 角度 ， 并 计算 相应 的 旋转 时 间 ， 
最 后 调用 旋转 圆 盘 的 函数 进行 旋转 。 





(6) 添加 窗口 加 载 时 调用 绘制 函数 的 代码 。 





OT onl (OO : 国 % 人 六 

















图 6.20 游戏 开始 画面 图 6.21 随机 停留 到 某 个 位 置 
6.3 HTMLS 的 其 他 应 用 


HTMLS5 很 多 新 的 特性 和 功能 是 针对 互联 网 发 展 过 程 中 用 户 的 需求 增加 进来 的 , 除了 
前 面 介 绍 的 画布 功能 之 外 ， 音 频 和 视频 的 嵌入 功能 、 本 地 数据 和 地 理 数 据 的 应 用 都 很 大 
程度 上 丰富 了 HTMLS5 的 应 用 。 


1. 嵌入 音频 和 视频 
在 互联 网 上 ， 音 频 与 视频 的 使 用 非常 频繁 ， 尤 其 近 些 年 视频 网 站 、 视 频 直播 火爆 异 
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常 ， 因 此 在 网 页 上 嵌入 音频 和 视频 就 成 为 网 页 设计 中 非常 常用 的 手段 。 在 HIMLS 以 前 ， 
在 网 页 中 插入 音频 或 视频 往往 需要 借助 插件 来 实现 。 在 HIML5 中 引入 了 新 的 方法 , 能够 
在 网 页 中 不 借助 其 他 插件 插入 音频 和 视频 。 

HTML5 通过 <audio> 标 签 实现 了 通过 浏览 器 播放 音频 ， 通 过 <video> 标 签 实现 了 对 视 
频 的 嵌入 和 播放 。 

例 6.18: 插入 音频 

<audio src="media/For Elise.mp3" controls="controls"> 


你 的 浏览 器 不 支持 音频 播放 ! 
</audio> 


<audio> 标 签 的 src 属性 指明 音频 文件 的 位 置 和 名 称 ，controls 属性 用 于 添加 播放 、 暂 
停 和 音量 控件 ， 预 览 效果 如 图 6.22 所 示 ， 不 同 浏览 器 的 播放 界面 差别 较 大 。 
































大 ] EN 文档 文件 夫 \H5 教 材 凡 ”| 大 HTML5 音 频 图 
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图 6.22 ”<audio> 标 签 示例 


除了 上 面 介绍 的 两 个 属性 ，<audio> 标 签 还 有 三 个 属性 : autoplay="autoplay" 用 于 设置 
音频 准备 就 绪 后 就 自动 进行 播放 ; loop="loop" 用 于 设置 音频 循环 播放 ; preload="preload" 
表示 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 ， 如 果 使 用 "autoplay"， 则 忽略 该 属性 。 

目前 HIMLS 支持 的 音频 文件 格式 有 MP3、Ogg Vorbis 和 WAV, 不 同 的 浏览 器 对 其 
支持 也 不 一 样 ， 随 着 浏览 器 的 不 断 发 展 ， 支 持 的 格式 也 会 越 来 越 多 。 

与 对 音频 支持 的 情况 类 似 ， 不 同 的 浏览 器 对 不 同 视频 格式 文件 的 支持 也 存在 差异 ， 
目前 支持 的 三 种 视频 格式 为 Ogg、MPEG 4 和 WebM。 值得 注意 的 是 , 对 于 MPEG 4 格式 
来 说 ， 不 同 的 压缩 编码 算法 ， 浏 览 器 的 支持 也 存在 差别 。 

例 6.19: 插入 视频 (预览 效果 如 图 6.23 所 示 ) 

<video stc="media/movie.mp4" width="320" height="240" controls="controls"> 

你 的 浏览 器 不 支持 音频 播放 ! 

</video> 

















<video> 标 签 的 属性 与 <audio> 标 签 的 属性 相似 ， 也 有 autoplay、loop 和 preload 属性 ， 
比 <audio> 标 签 多 width 和 height 两 个 属性 ， 用 于 设置 视频 在 页 面 中 的 宽度 和 高 度 。 
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图 6.23 ”<video> 标 签 示例 
2. 客户 端 数据 的 使 用 


HTML5 新 增加 的 操作 客户 端 数据 的 功能 为 开发 者 实现 Web 应 用 程序 的 离线 使 用 提 
供 了 解决 方案 。 以 前 的 Web 应 用 程序 或 者 网 站 在 对 客户 端 数据 进行 存储 时 都 是 采用 
cookie， 其 较 差 的 安全 性 和 易 用 性 都 给 Web 应 用 程序 的 开发 和 使 用 带 来 不 少 麻烦 。 

HTMLS 为 用 户 提 供 了 存储 客户 端 数据 的 新 方式 : Web Storage(loacalStorage 和 
sessionStroage) 和 Web SQL Databases。 这 两 种 方式 都 具有 使 用 简单 且 安 全 性 高 的 优点 。 
Web SQL Databases 已 经 作为 独立 的 标准 ， 这 里 主要 介绍 loacalStorage 和 sessionStroage 
的 基本 用 法 。 

localStorage 也 叫 本 地 存储 , sessionStorage 也 叫 会 话 存储 , 两 种 存储 的 基本 操作 一 样 ， 
不 同 之 处 在 于 两 者 之 间 在 持久 性 和 范围 上 的 区 别 。 

localStorage 能 够 长 期 保存 数据 ， 数 据 的 存储 不 会 受到 浏览 器 窗口 关闭 的 影响 ， 保 存 
的 数据 也 可 用 于 所 有 同 源 网 页 或 窗口 的 加 载 。 即 用 户 重新 打开 浏览 器 ,访问 相同 域名 ， 
并 且 协 议和 端口 一 致 的 网 址 ， 将 仍然 能 够 访问 localStorage 存储 的 数据 。sessionStorage 
只 存储 当前 页 面 或 窗口 对 象 中 的 数据 ， 也 就 是 Web 开发 中 常 说 的 一 个 会 话 周 期 。 当 浏览 
器 窗口 关闭 后 ， 数 据 将 不 会 被 保存 。 

例 6.20: 测试 浏览 器 能 否 支持 本 地 存储 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 本 地 存储 </title> 

<script> 

if(window .localStorage){ 

document.write(' 浏 览 器 支持 localStorage'); 
}else{ 
document.write(' 浏 览 器 不 支持 localStorage"); 





/script> 
</head> 
<body> 
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本 地 存储 对 数据 的 存储 以 字符 串 数据 (通常 是 键 值 对 方式 ， 如 name:"Tom") 方 式 存储 
在 文件 中 。 对 数据 的 操作 可 以 使 用 四 个 方法 ， 也 可 以 采用 属性 的 方式 来 操作 。 

setItem() 方 法 用 于 设置 存储 数据 ，getItem() 方 法 用 于 获取 数据 ，removeItem() 方 法 用 
于 删除 指定 的 键 值 对 ，clear0 方 法 用 于 清空 存储 的 数据 。 

例 6.21: 本 地 数据 操作 方式 





以 上 代码 的 运行 结果 如 图 6.24 所 示 。 


/i | 


《€ 了 GCG |@ filey///E/ 文 机 文件 夹 /H.， 妆 














Tom24 


图 6.24 浏览 器 设置 允许 运行 脚本 
其 他 方法 的 用 法 参照 以 下 代码 : 
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3. 地 理 数 据 


HIML5 为 了 对 移动 应 用 提供 更 好 的 支持 ， 增 加 了 处 理 地 理 位 置 的 功能 。 可 通过 
getCurrentPosition() 方 法 获得 用 户 的 位 置 ， 其 返回 值 为 用 户 位 置 的 经 度 和 纬度 。 在 多 数 情 
况 下 ， 在 PC 端 无 法 直接 使 用 该 方法 。 


6.4 本 章 小 结 








本 章 主要 介绍 了 HTMLS 的 一 些 高 级 应 用 , 重点 介绍 了 HTMLS5 画布 的 相关 概念 和 应 
用 。 为 了 在 画布 上 实施 绘图 , 通过 示例 讲解 了 通过 JavaScript 脚本 在 画布 上 绘制 各 种 基本 
图 形 的 方法 .通过 折线 图 、 饼 图 等 综合 应 用 进一步 讲解 其 应 用 , 同时 讲解 了 jQuery、Threejs 
等 框架 的 使 用 。 最 后 介绍 了 HTMLS5 中 音频 、 视 频 与 本 地 存储 的 应 用 。 


6.5 ” 课 后 训练 








1. 利用 HIMLS 画布 绘制 奥运 五 环 标志 。 
2. 参考 绘制 折线 图 的 示例 绘制 课程 成 绩 分 布 折线 图 ， 数 据 如 表 6.2 所 示 。 

















表 6.2_ 课 程 成 绩 分 布 
成 绩 区 段 人 数 
90 分 以 上 10 
80 分 一 90 分 26 
70 分 一 80 分 23 
60 分 一 70 分 15 
60 分 以 下 3 
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Bootstrap 是 当前 非常 流行 的 用 于 快速 开发 Web 应 用 程序 和 网 站 的 前 端 框架 。 在 目前 
的 Web 开发 中 ， 在 前 端 将 HIML、CSS 和 JavaScript 三 种 技术 结合 在 一 起 以 实现 友好 的 
用 户 界面 的 趋势 下 ， 该 框架 实质 上 是 一 套 集成 了 这 三 种 技术 的 工具 包 ， 是 对 三 者 进行 合 
理 整 合 后 形成 的 综合 性 框架 ， 并 且 不 同 于 单纯 的 JavaScript 框架 。 

















7.1 Bootstrap 简介 


7.1.1 Bootstrap 的 发 展 历史 和 组 成 
1. Bootstrap 的 发 展 历史 


Bootstrap 是 由 Twitter 公司 的 Mark Otto 和 Jacob Thornton 主导 建立 的 开源 项 目 ， 是 
用 于 Web 应 用 开发 的 前 端 工具 包 ， 于 2011 年 8 月 在 GitHub 上 发 布 的 。 该 工具 包 的 创建 
目的 是 帮助 设计 师 和 开发 人 员 快 速 有 效 地 创建 结构 简单 、 性 能 优良 、 页 面 精致 的 Web 应 
用 程序 。 

Bootstrap 虽然 发 布 时 间 不 长 ， 但 是 已 经 非常 成 熟 ， 包 括 完整 的 CSS 编译 和 非 编译 版 
本 、 样 例 模板 和 JavaScript 插件 等 ， 并 得 到 广泛 推广 。 自 Bootstrap 3 起 ， 强 化 了 对 移动 设 
备 的 应 用 ， 对 目前 主流 浏览 器 的 支持 非常 优秀 。 截 至 目前 ，Bootstrap 已 发 展 到 包括 几 十 
个 组 件 ， 并 且 已 成 为 最 流行 的 项 目 之 一 。 

2. Bootstrap 的 组 成 


Bootstrap 有 几 十 个 组 件 用 于 创建 图 像 、 下 拉 菜 单 、 导 航 、 警 告 框 、 弹 出 框 等 ， 这 些 
组 件 既 能 照顾 到 设计 层 ， 也 能 考虑 到 开发 展 ， 拥 有 完善 的 组 件 和 模板 机 制 。 其 栅 格 结构 
的 布局 方式 ， 很 容易 设计 出 质量 高 、 风 格 统一 的 网 页 。 所 有 这 些 组 件 都 建立 在 HTML、 
CSS 和 JavaScript 三 项 技术 之 上 。 

Bootstrap 是 基于 HIMLS 的 最 新 技术 。HTMLS5 灵活 高 效 、 简 洁 流畅 的 特点 ， 再 结合 
新 增加 的 功能 ， 使 网 页 的 语义 性 大 大 增加 ， 更 加 有 利于 设计 出 美观 的 页 面 。 

Bootstrap 的 CSS 是 使 用 Less 创建 的 CSS, 是 新 一 代 的 动态 CSS。 在 设计 过 程 中 减少 
了 CSS 代码 的 使 用 量 ， 提 高 了 设计 效率 ， 便 于 阅读 和 理解 ， 同 时 也 便于 提高 浏览 器 的 解 
析 速 度 。 

Bootstrap 的 另 一 重要 组 成 部 分 引入 了 优秀 的 jQuery 框架 以 实现 JavaScript 功能 的 优 
化 。 在 设计 过 程 中 可 以 方便 地 调用 jQuery 代码 库 中 的 各 种 方法 来 实现 相应 功能 ， 而 不 用 
再 次 编写 和 开发 相关 功能 的 代码 。 
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7.1.2 ”如 何 使 用 Bootstrap 
1. 安装 Bootstrap 


Bootstrap 是 一 套 完 成 Web 应 用 前 端 设计 与 开发 的 工具 包 , 在 使 用 时 需要 将 其 主要 组 
件 或 全 部 组 件 放置 在 Web 应 用 的 站 点 内 ， 其 目录 结构 如 图 7.1 所 示 ， 包 含 三 个 目录 ， 其 
中 CSS 目录 中 存放 的 是 Bootstrap 的 样式 文件 ， 如 图 7.2 所 示 。 默 认 状 态 下 ，Bootstrap 的 
js 目录 中 只 包含 Bootstrap 的 JavaScript 文件 ， 不 包含 jQuery， 因 此 在 使 用 时 需要 将 
jquery.minjjs 文件 复制 到 此 目录 ， 如 图 7.3 所 示 。 
这 里 介绍 的 目录 结构 是 以 Bootstrap 3.7.7 编译 后 的 版 本 ，Bootstrap 也 有 源码 包 , 可 以 











从 其 官网 上 下 载 。 





名 称 


用 css 
下 fonts 
js 











口 名 称 
TE bootsuapcss 
] bootstrapcssmap 
嗓 bootstap mincss 
] bootstrap mincssmap 
bootstrap-theme.css 
] bootstrap-theme, ap 
时 bootstrap-thememincss 


] bootstrap-theme.min.css.map 








修改 日 期 类 型 

2018/2/6 22:12 文件 夹 
2018/2/6 22:12 文件 夹 
2018/2/6 22:12 文件 夹 


图 7.1 目录 结构 


修改 日 明 类 型 大 小 





图 7.2 CSS 目录 中 的 CSS 文件 





名 称 











日 bootstrapjs 
日 bootstrap.minjs 
日 jquery.minjs 


目 npmjs 


修改 日 其 


2016/7/25 15:53 
2016/7/25 15:53 
2015/6/16 15:16 
2016/7/25 15:53 


图 7.3 js 目录 中 的 JavaScript 文件 


2. 在 页 面 中 使 用 Bootstrap 











在 页 面 中 使 用 Bootstrap 时 ， 需 要 将 其 样式 文件 和 JavaScript 文件 引入 到 页 面 中 ， 引 








用 的 方式 有 两 种 : 一 种 是 引用 在 线 的 文件 ， 另 一 种 是 引用 本 地 的 文件 。 以 下 代码 采 上 
引用 本 地 文件 的 方式 , 在 引用 JavaScript 文件 时 要 注意 , 先 引 用 jQuery 的 JavaScript 文件 ， 
再 引用 Bootstrap 的 JavaScript 文件 。 


























<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
‘<script src="bootstrap/js/jquery.min.js"></script> 
<script src="bootstrap/is/bootstrap.min.js"></script> 

















了 
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在 引用 Bootstrap 后 , 网 页 其 实 已 经 具备 Bootstrap 的 模板 的 所 有 特点 了 。 在 没有 使 用 
Bootstrap 的 各 种 类 和 组 件 之 前 ， 看 不 出 与 普通 HTML 页 面 的 差别 。 在 下 面 的 示例 中 ， 在 
页 面 中 加 入 容器 类 之 后 ， 页 面 中 部 出 现 了 一 块 用 于 包 庄 页 面 内 容 的 区 域 ， 且 左右 外 边 距 
跟随 浏览 器 窗口 的 宽度 变化 ， 如 图 7.4 所 示 。 

例 7.1: 使 用 Bootstrap 的 容器 类 


加 本 
omep 和 了 检 这 全 风 用 于 忆 开 wen P40 的 呈 相当 在 
类 中， 术 结 兰 在 一 起 以 实 砚 去 好 的 ) 


2 时 当 二 炳 六 站 的 则 于 于 玫 we 应 用 条 和 站 站 的 
2 半 寺 由 tl gp ss 三 种 捷 林 
ER 让 
三 种 村 运行 人 上 和 有 





图 7.4 使 用 Bootstrap 的 容器 类 
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7.2 ”Bootstrap 组 织 与 排版 


Bootstrap 对 页 面 的 组 织 采 用 类 似 于 搭 积木 的 方式 实现 了 扁平 化 设计 思想 ， 更 适合 快 





速 设计 网 页 。 在 Bootstrap 3 版 本 后 ， 加 入 了 移动 设备 优先 的 特点 ， 由 此 开发 的 网 站 也 更 
加 适合 移动 设备 使 用 。 
7.2.1 ”Bootstrap 的 网 格 系统 

1. 网 格 系统 


Bootstrap 的 网 格 系统 的 实现 初衷 是 为 了 能 够 针对 多 种 不 同 终端 设备 (如 手机 、 平 板 电 
脑 、 桌 面 电 脑 ) 设 计 统 一 的 网 站 ， 而 不 需要 对 不 同 的 设备 开发 不 同 的 网 站 ， 从 而 减轻 开发 
强度 。 

Bootstrap 的 网 格 系统 可 以 将 页 面 的 宽度 方向 最 多 分 为 12 列 , 并 能 够 提供 一 种 响应 机 
制 ， 使 得 页 面 内 容 可 以 随 着 浏览 宽度 的 变化 而 调整 显示 效果 ， 进 而 适应 显示 设备 。 这 种 
响应 式 网 格 系统 随 着 屏幕 或 视 口 (viewporb 尺 寸 的 增加 ， 系统 会 自动 分 为 最 多 12 列 , 原理 
示意 图 如 图 7.5 所 示 。 





图 7.5 Bootstrap 网 格 系统 示意 图 


Bootstrap 的 网 格 系统 有 些 类 似 于 表格 结构 。 首 先 ， 整 个 网 格 系统 由 行 (row) 和 列 
(.column) 组 成 ， 行 必须 包含 在 容器 (.containen) 中 ， 而 列 则 必须 包含 在 行 中 ， 且 列 的 总 数 之 
和 不 能 超过 总 列 数 12， 具 体 的 内 容 则 必须 放置 在 列 中 。 列 的 类 名 以 col-lg-x、col-md-x、 
col-xs-x 等 命名 ，x 为 数字 ， 可 以 是 1 到 12。 

下 面 的 示例 在 网 格 系统 的 容器 中 定义 了 两 行 ， 在 第 一 行 里 放置 了 两 列 ， 一列 占 4 份 ， 
另 一 列 占 8 份 ; 第 二 行为 三 列 , 各 占 4 份 , 预览 效果 如 图 7.6 所 示 。 当 浏览 器 窗口 缩小 时 ， 
布局 会 发 生 重新 排列 ， 如 图 7.7 所 示 。 

例 7.2: 创建 简单 的 网 格 布局 

(1) 在 创建 HTMLS5 文件 后 ， 在 <head> 标 签 内 部 引用 Bootstrap 的 主要 文件 。 

(2) 在 <body> 标 签 内 添加 一 对 <div> 标 签 ， 为 其 设置 class="container"。 

(3) 在 该 <div> 内 部 再 添加 两 对 <div> 标 签 ， 为 其 设置 class="row"， 也 就 是 添加 网 格 中 
的 行 。 

(4) 分 别 在 两 行内 添加 列 , 为 上 面 一 行 定义 了 两 列 , 左边 列 的 占 4 份 , 右边 列 的 占 8 份 ， 
代码 如 下 : 
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将 下 面 一 行 平分 为 三 份 ， 代 码 如 下 : 





完整 代码 如 下 所 示 : 




















- 0 巧 
国 @EECCTCZCRTEIIETE x 转 分 交合 @ 
coHmd-4 cohmd-8 
cohHmd-4 coHmd-4 cohmd4 











7.6 网 格 布局 示例 
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= 口 x 
站 | EN 文 入 文件 夫 \H5 教 材 \H5sit P ~ C || 碟 Bootstrap 示 例 图 
col-md-4 
col-md-8 
col-md-4 
col-md-4 
col-md-4 











通过 对 .rows 上 











Less 文件 中 使 上 











图 7.7 浏览 器 窗口 缩小 后 的 效果 
Bootstrap 的 列 可 以 通过 设置 其 内 边 距 (padding) 来 创建 列 内 容 之 间 的 间隙 ， 该 内 边 距 
的 外 边 距 (margin) 取 负 ， 来 表示 第 一 列 和 最 后 一 列 的 行 偏 移 。 

Bootstrap 中 的 媒体 查询 允许 基于 视 口 大 小 移动 、 显 示 并 隐藏 内 容 。 表 7.1 列 出 了 在 


媒体 查询 时 对 设备 的 分 类 ， 用 来 创建 Bootstrap 网 格 系统 中 关键 的 分 界 点 


阔 值 。 媒 体 查 询 有 两 个 部 分 ， 首 先是 设备 规范 ， 然 后 是 大 小 规则 。 有 时 候 也 会 在 媒体 查 

询 代码 中 包含 max-width， 从 而 将 CSS 的 影响 限制 在 更 小 范围 的 屏幕 大 小 之 内 。 
@media (max-width: @screen-xs-max) { … } 
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ...} 
@media (min-width: @screen-md-min) and (max-width: (@screen-md-max) { ...} 
@media (min-width: @screen-lg-min) { ...} 

表 7.1 网 格 系统 对 设备 的 分 类 
































设备 分 类 | 超 小 设备 手机 | 小 型 设备 中 型 设备 大 型 设备 
分 界 点 阐 信 (<768px) 平板 电脑 (2768px) | 台式 电脑 (>992px) 台式 电脑 (>1200px) 
网 格 行为 . 直 是 水 平 以 折 芝 开始, 断 点 | ”以 折 盖 开始 , 断 点 以 | 以 折 肝 开始, 断 点 以 
以 上 是 水 平 的 上 是 水 平 的 上 是 水 平 的 
最 大 容器 宽度 | none(auto， 970px 1170px 
Class 前 绥 .COl-xs- .col-md- .col-lg- 
列 数量 和 12 12 12 
最 大 列 宽 auto 78px 95px 
间隙 宽度 30px 30px 30px 
可 幅 套 Ves Yes Yes 
偏 移 量 Yes Yes Yes 
列 排序 Yes Yes Yes 
例 7.3: 个 人 简历 页 面 的 制作 
(1) 除了 在 <head> 标 签 中 引用 Bootstrap 的 相关 文件 之 外 ， 需 要 添加 下 面 一 行 代码 : 








<meta name="viewport" content="width=device-width, initial-scale=1"> 


的 适应 性 ， 也 就 是 窗口 大 小 随 着 设备 变化 的 同时 ， 页 面 也 会 


上 述 代码 用 于 定义 窗口 


跟着 适应 变化 。 


(2) 在 <body> 标 签 内 ,所 有 内 容 都 包含 在 class="container" 的 <div>j 








,内 容 分 为 两 部 分 : 
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第 一 部 分 <div class="jumbotron">...…...</div> 用 于 显示 姓名 和 求职 意向 。 

第 二 部 分 为 Bootstrap 的 行 <div class="row">， 在 其 内 部 定义 了 三 个 列 ， 分 别 用 于 显 
示 “ 基 本 信息 ”“ 学 习 经 历 ” 和 “技能 特长 ”。 

(3) 详细 代码 如 下 ， 预 览 效 果 如 图 7.8 和 图 7.9 所 示 。 
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EE tap 实 = bd | 求职 意向 : 网 站 设计 师 全 职 西安 
ee © te/FIHSBEN/ HS ete 2/5 21-2 html D 女 大 人 

















— 基本 信息 
苏三 1995/0312 
求职 意向 : 网 站 设计 师 全 职 西安 13013913313 
susan@123 com 
学 习 经 历 
2014 3.20177 辽 RITJUR 业 法 术 字 院 
基本 信息 学 习 经 历 技能 特长 be 
1995/03/12 至 92017 7 陕西 工业 职业 技术 ns a Re ee PHP 网 站 开 
13013913313 Me 入 两 网 站 管理 与 维护 技能 特长 
wm Rn PrP i 
y 精通 HTML5、CSS3 网 页 设计 
Se 夭 天 网 站 各 于 与 维护 
7.8 浏览 器 窗口 较 大 时 的 预览 效果 图 7.9 浏览 器 窗口 较 小 时 的 预览 效果 


Bootstrap 的 网 格 可 以 实现 列 的 嵌 套 ， 即 在 已 经 创建 的 列 中 再 创建 若干 列 ， 从 而 形成 
更 为 复杂 的 布局 结构 。 同 时 ，Bootstrap 网 格 系统 还 提供 了 一 种 非常 实用 的 功能 ， 可 以 对 
每 一 列 进行 编号 ， 在 页 面 上 ， 将 会 按照 编号 的 顺序 显示 列 的 顺序 ， 能 够 更 灵活 和 方便 地 
安排 每 一 列 的 位 置 。 需 要 对 列 排序 时 ， 可 以 使 用 .col-md-push-* 和 .col-md-pull-* 类 的 内 置 
网 格 列 。 

例 7.4: 网 格 嵌 套 

(1) 在 上 一 示例 的 基础 上 ， 在 “学 习 经 历 ” 和 “技能 特长 ”两 个 Div 的 外 层 添 加 一 个 
新 的 网 格 class col-sm-8， 与 基本 信息 构成 12 格 ， 代 码 如 下 : 


(2) 在 “技能 特长 ”后 添加 一 个 新 的 Div 并 设置 其 class 为 col-sm-4， 与 前 两 个 构成 
12 格 。 

(3) 分 别 对 “学 习 经 历 ”“ 技 能 特长 ”和 “获奖 情况 ”的 样式 进行 设置 ， 修 改 背 景色 、 
边框 与 高 度 等 ， 具 体 代码 如 下 : 
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设置 完成 后 ， 在 较 大 浏览 器 窗口 中 的 显示 效果 如 图 7.10 所 示 ， 在 较 小 浏览 器 窗口 中 的 
显示 效果 如 图 7.11 所 示 。 











ootstrs 


各 人 fileyVWFVH5 教 奢 /H5s 六 


全 13013913313 
要 susan@123 com 


























图 7.10 在 较 大 窗口 中 的 显示 效果 图 7.11 在 较 小 窗口 中 的 显示 效果 
2. 文字 排版 


Bootstrap 的 文字 排版 在 HTML 的 基础 上 进行 了 一 些 规划 , 加 入 了 一 些 非常 实用 的 功 
能 ， 如 副标题 、 强 调 文本 、 字 体 图 标 等 。Bootstrap 使 用 Helvetica Neue、Helvetica、Arial 
和 sans-serif 作为 默认 的 字体 栈 ， 但 没有 默认 的 中 文字 体 。 

(1) 标题 


Bootstrap 中 定义 了 所 有 HTML 标题 (H1 到 H6) 的 样式 ,并 且 与 HIML 标题 保持 一 致 ， 


同时 Bootstrap 提供 了 内 联 自 标题 ， 也 称 为 副标题 。 在 标准 标题 内 使 用 <small> 标 签 或 者 添 
加 .small class， 就 能 得 到 字号 更 小 、 颜 色 更 浅 的 文本 。 
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例 7.5: 添加 副标题 
在 上 一 个 示例 的 基础 上 将 “苏三 ”和 “求职 意向 : …” 等 文字 改 为 标题 1; 在 “求职 
意向 : .…” 前 后 添加 <small></small> 标 签 ， 预 览 效果 如 图 7.12 所 示 。 





日 gootsvap 实 全 x be 
€ SO A |O edsseys21Ahe ne 





苏三 求职 意向 : 网 站 设计 师 全 职 西安 


基本 信息 

星 19950312 

傅 际 西 省 西安 市 
从 13013913313 
要 susan@123 com 








7.12 副标题 


(2) 强调 文本 

为 了 给 段落 添加 强调 文本 ， 可 以 添加 class="lead"， 这 将 得 到 更 大 更 粗 、 行 高 更 高 的 
文本 。 

(3) 字体 图 标 

Bootstrap 提供 了 一 种 字体 图 标 (Glyphicons)。 在 安装 Bootstrap 时 ， 字 体 图 标 安装 在 
font 目录 中 。 在 使 用 字体 图 标 时 ， 可 以 在 需要 添加 图 标的 地 方 先 插入 一 个 <span> 标 签 ， 然 
后 根据 需要 添加 glyphicon 类 ， 并 给 出 图 标的 名 称 ， 如 下 所 示 ， 在 图 标 和 文本 之 间 保留 适 
当 的 空间 : 





例 7.6: 为 “基本 信息 ”添加 字体 图 标 
在 “基本 信息 ”下 面 每 一 段 文字 前 添加 一 对 <span></span> 标 签 ， 并 依次 添加 字体 图 
标 类 和 图 标 名 称 ， 具 体 代码 如 下 : 


在 浏览 器 中 预览 后 ， 可 以 看 到 每 段 信息 前 出 现 了 不 同样 式 的 图 标 ， 如 图 7.13 所 示 。 





(4) 列表 
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基本 信息 
朋 1995/03/12 
会 陕西 省 西安 市 
例 13013913313 


要 susan@123.com 


图 7.13 字体 图 标 


Bootstrap 支持 有 序列 表 、 无 序列 表 和 定义 列表 , 与 HIML 中 的 列表 一 致 , 但 Bootstrap 


提供 了 更 多 类 ， 月 





目 于 修饰 各 种 列表 ， 例 如 : .list-unstyled 移 除 无 序列 表 开头 的 着 重 


号 ，.list-inline 把 所 有 的 列表 项 放 在 同一 行 中 ，.dl-horizontal 可 以 让 <dl> 内 的 短语 及 其 描述 
排 在 一 行 。 开始 时 , 像 <dl> 的 默认 样式 堆 秋 在 一 起 , 随 着 导航 条 的 逐渐 展开 而 排列 在 一 行 。 


(5) 其 他 排版 类 
除了 以 上 常用 的 排版 类 之 外 ，Bootstrap 还 提供 很 多 其 他 很 多 用 于 排版 的 类 ， 如 表 7.2 








所 示 。 
表 7.2 Bootstrap 的 其 他 排版 类 
类 名 描述 
lead 使 段落 突出 显示 
.small 设 定 小 文本 (设置 为 父 文本 的 85% 大 小 ) 
‘text-left 设 定 文 本 左 对 齐 
‘text-center 设 定 文本 居中 对 齐 
.text-right 设 定 文本 右 对 齐 
text-justi 设 定 文本 对 齐 ， 段 落 中 超出 屏幕 部 分 的 文字 自动 换行 
.text-nowrap 段落 中 超出 屏幕 部 分 的 文字 不 换行 
‘text-lowercase 设 定 文本 小 写 
‘text-uppercase 设 定 文本 大 写 
‘text-capitalize 设 定单 词 首 字 母 大 写 





.initialism 


显示 在 <abbr> 元 素 中 的 文本 以 小 号 字体 展示 ， 且 可 以 将 小 写字 母 转换 为 大 写字 母 





.blockquote-reverse 


设 定 引 用 右 对 齐 











.list-unstyled 移 除 默认 的 列表 样式 ， 列 表 项 左 对 齐 (在 <ul> 和 <ol> 中 )。 这 个 类 仅 适 用 于 直接 子 
列表 项 (如 果 需 要 移 除 嵌 套 的 列表 项 ， 需 要 在 嵌 套 的 列表 中 使 用 该 样式 ) 

‘list-inline 将 所 有 列表 项 放 在 同一 行 

.dl-horizontal 该 类 设置 了 浮动 和 偏 移 并 应 用 于 <dl> 和 <d 必 元 素 中 ， 具 体 实现 可 以 查看 实例 





.pre-scrollable 


3. 表格 








使 <pre> 元 素 可 滚动 ， 代 码 块 区 域 的 最 大 高 度 为 340px， 一 旦 超出 这 个 高 度 ， 就 
会 在 Y 轴 出 现 滚动 条 


Bootstrap 提供 了 多 种 风格 的 表格 布局 , 以 支持 HTML 的 表格 元 素 : <table>、<thead>、 
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<tbody>、<tr>、<td>、<th>、<caption> 等 。Bootstrap 也 针对 这 些 表格 元 素 提供 相应 的 类 ， 
以 对 表格 进行 样式 设置 ， 这 些 类 详 见 表 7.3。 
表 7.3 ”Bootstrap 提供 的 表格 样式 





类 名 描述 针对 标签 

为 任意 <table> 元 素 添加 基本 样式 (只 有 横向 分 隔 线 )， 被 称 为 

-table <table> 
基本 表格 

器 纹 (IE8 不 ， 

ER 在 <tbody> 内 添加 斑马 线形 式 的 条 纹 (IE8 不 支持 )， 被 称 为 条 oe 
纹 表 格 

-table-bordered 为 所 有 表格 的 单元 格 添加 边框 ， 被 称 为 边框 表格 <table> 





O.table-hover 在 <tbody> 内 的 任意 一 行 启用 鼠标 悬 停 状 态 ， 被 称 为 悬 停 表 格 | <table> 
行内 边 距 (padding) 被 切 为 两 半 ， 以 便 让 表格 看 起 来 更 紧凑 ， 








:table-condensed 也 被 称 为 精简 表格 <table> 

.active, 针对 某 个 特定 的 行 或 单元 格 应 用 悬 停 颜 色 <tr> <th> <td> 
.success 表示 成 功 的 操作 动作 <tr> <th> <td> 
.info 表示 信息 变化 的 操作 动作 <tr> <th> <td> 
.Warning 表示 警告 的 操作 动作 <tr> <th> <td> 
.danger 表示 危险 的 操作 动作 <tr> <th> <td> 


例 7.7: 应 用 Bootsrap 的 各 种 表格 样式 
图 7.14 为 从 基本 表格 至 精简 表格 的 预览 图 ， 在 <table> 标 签 中 设置 Bootstrap 样式 , 相 
应 设置 的 主要 代码 如 下 所 示 : 
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至 口 x 
(©®)® 息 ] EN 文档 文件 去 \H5 教 材 H5sil P ~ C oot. @ Boot.. 大 去 .x 介 灾 远 @ 








学 号 姓名 专业 班级 
0401160101 张 = 计算 WUS 用 技术 计 应 1601 
0402160104 ”地 四 软件 技术 软件 1601 
0405150223 于 计算 机 网 络 技术 网 络 1502 
慰 纹 得 
学 号 姓名 专业 班级 
0401160101 。 张 三 计算 WE 用 技术 计 应 1601 
0402160104 ”地 四 软件 技术 软件 1601 
0405150223 于 计算 机 网 络 技术 网 络 1502 
[边框 和 
学 号 姓名 专业 更 级 
0401160101 。” 张 三 计算 机 应 用 技术 计 应 1601 
0402160104 。。 李 四 软件 技术 软件 1601 
0405150223 ”3 计算 机 网 络 技术 网 络 1502 
学 号 姓名 专业 班级 
0401160101 张 = 计算 机 应 用 技术 计 应 1601 
0402160104 ”地 四 软件 技术 软件 1601 
0405150223 于 计算 机 网 络 技术 网 络 1502 
学 号 姓名 专业 班级 
0401160101 张 = 计算 机 应 用 技术 计 应 1601 
0402160104 ”地 四 软件 技术 软件 1601 
0405150223 于 五 计算 机 网 络 技术 网 阁 1502 





图 7.14 Bootstrap 表格 样式 示例 
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例 7.8: Bootstrap 表格 的 上 下 文 样式 
7.15 中 ， 上 面 的 表格 为 标准 Bootstrap 表格 ， 下 面 的 是 在 为 <u> 标 签 设置 了 上 下 文 
样式 后 的 表格 ， 不 同 含义 操作 的 行 具有 不 同 的 样式 ， 主 要 代码 如 下 : 
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一 OO x 
| EHssite\ptssample\table02 html ~ | 搜索 - 了 -| 价 六 可 @ 
屋 孝 属 示例 x 转 
X 夯 到 罗 了 


基本 表格 
学 号 








姓名 专业 班级 
0401160101 ” 张 三 计算 机 应 用 技术 计 应 1601 
0402160104 ” 李 四 软件 技术 软件 1601 
于 五 


0405150223 


潜 格 上 下 文 

学 号 姓名 

0401160101 张 三 
李 四 




















图 7.15 带 上 下 文 样式 的 表格 


通常 情况 下 ，Bootstrap 的 表格 都 可 以 随 着 浏览 器 窗口 的 变化 而 变化 ， 这 在 大 型 的 显 
示 设 备 上 非常 有 利 ， 但 一 旦 页 面 在 小 型 的 显示 设备 (宽度 小 于 768px) 上 显示 时 ， 就 会 出 现 
问题 ,因此 ,Bootstrap 提供 了 一 种 叫 作 响 应 式 表格 的 样式 。 该 样式 的 类 为 table-responsive， 
通常 出 现在 <div> 标 签 中 ， 并 包含 任意 的 含有 .table 类 的 表格 。 当 在 宽度 大 于 768px 的 大 
型 设备 上 显示 时 ， 两 种 表格 没有 任何 差别 。 当 小 于 该 宽度 时 ， 标 准 表格 单元 格 内 的 文字 
会 受 挤 压 换行 , 而 响应 式 表 格 则 不 会 发 生 该 情况 , 如 图 7.16 所 示 , 上 面 的 表格 是 Bootstrap 
的 标准 表格 ， 下 面 是 Bootstrap 的 响应 式 表格 。 

响应 式 表 格 的 主要 代码 如 下 : 





。200 。 


HIML5+CSS3 网 页 设计 案例 教程 



































(© 

岩 本 表格 

学 号 姓名 专业 班级 

0401160101 张 三 计算 机 应 用 ” 计 应 1601 
技术 

0402160104” 李 四 软件 技术 。 ”软件 1601 

0405150223 王 五 计算 机 网 络 ”网 络 1502 
技术 

学 号 姓名 ”专业 班级 

0401160101 张 二 计算 机 应 用 技术 计 应 1601 

0402160104 李 四 ” ”软件 技术 软件 1601 

0405150223 ”于 五 。 ”计算 机 网 络 技术 ”网络 1502 

图 7.16 ”Bootstrap 的 标准 表格 和 响应 式 表格 
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4. 图 像 


Bootstrap 对 图 片 的 显示 在 HTML 的 基础 上 进行 了 一 定 的 扩展 。 Bootstrap 提供 以 下 可 
对 图 片 应 用 简单 样式 的 类 : 

e .img-rounded: 添加 border-radius:6px 来 获得 图 片 圆 角 。 

@ .img-circle: 添加 border-radius:50% 来 让 整个 图 片 变 成 圆 形 。 

e .img-thumbnail: 添加 一 些 内 边 距 (padding) 和 一 条 灰色 的 边框 。 

例 7.9: Bootstrap 图 像样 式 

(1) 在 页 面 中 将 同一 图 片 插入 三 次 ， 如 图 7.17 所 示 。 








测 





Cas"> 








图 7.17 插入 图 片 
(2) 依次 选中 图 片 , 并 在 “属性 ”面板 中 设置 图 像 的 “类 ”为 “img-rounded”“img-circle” 
和 “img-thumbnail”， 如 图 7.18 所 示 ， 相 应 代码 如 下 所 示 : 
<img src="images/tea.png" class="img-rounded"> 
<img src="images/tea.png" class="img-circle"> 
<img src="images/tea.png" class="img-thumbnail"> 

















性 

Pi 80K 源 文件 G) insees/teapne | 局 着 搞 D)| -| 砍 只 | 类 (C) 
m 链接 (L) GD 人 MP HBO A 高 o by 

地 图 00 目标 (R) 

RR] DOVY 原 柏 SD 


图 7.18 设置 图 片 所 属 类 
(3) 预览 效果 如 图 7.19 所 示 。 


知 EN\ 文 卉 文件 夹 \H5 教 材 \H5sit 几 ”0 | 感 图 片 示例 





图 7.19 图 片 效果 
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Bootstrap 提供 了 一 种 响应 式 的 图 片 (.img-responsive 类 ), 设置 成 这 种 样式 的 图 片 可 以 
根据 浏览 器 窗口 宽度 的 缩小 而 缩小 ， 引 入 类 的 代码 如 下 : 





图 7.20 中 ， 左 侧 图 为 窗口 宽度 大 于 图 片 宽度 时 ， 将 显示 图 片 的 原始 尺寸 ， 右 侧 图 为 
当 窗口 宽度 小 于 图 上 宽度 时 ， 图 上 为 适应 窗口 而 缩小 后 的 效果 。 





| EE 二 口 x 
OD Voted LS "| 【全 )Q) 力 ENHSsitebtsampletabl -| 
司 图 片 示例 “图 | 
已 图 片 示例 x| 
X 国 弘 于 























图 7.20 ”响应 式 图 片 
5. 轮 播 


轮 播 是 目前 网 站 首页 中 较为 常用 的 一 种 展示 手段 ，Bootstrap 通过 轮 播 插件 (Carousel) 
提供 该 功能 ， 创 建 起 来 非常 简单 。Bootstrap 轮 播 插件 的 内 容 可 以 是 图 像 、 内 秽 框 架 、 视 
频 或 者 其 他 任何 类 型 的 内 容 。 

例 7.10: 简单 幻灯 片 轮 播 效 果 

轮 播 代 码 主要 包含 三 部 分 : 

(1) 首先 添加 一 对 <div> 标 签 用 于 装载 轮 播 的 内 容 ， 并 且 需 要 在 该 标签 中 添加 
class="carousel slide"， 用 于 引用 轮 播 插件 。 

在 刚才 创建 的 <div> 中 添加 一 个 列表 (这 里 使 用 有 序列 表 <ol>)， 并 添加 class="carousel 
slide" 用 于 设置 轮 播 指标 ， 类 似 于 索引 。 
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(2) 第 二 部 分 是 轮 播 项 目 ，class 设置 为 carousel-inner 的 Div 包含 了 轮 播 图 片 ， 每 一 
张 图 片 都 要 放 在 一 个 单独 的 <div> 中 ， 此 Div 被 设置 为 class="item"。 如 果 class="item 
active"， 就 表示 该 <div> 中 的 内 容 为 默认 显示 。 








<div class="carousel-inner"> 
<div class="item active"> 
<img src="images/tea01.jpe" alt="First slide"> 
</div> 
<div class="item"> 
<img src="images/tea02.jpg" alt="Second slide"> 
</div> 
<div class="item"> 
<img src="images/tea03.jpg" alt="Third slide"> 
</div> 
</div> 


(3) 最 后 一 部 分 为 轮 播 导 航 ， 设 置 滑 动 内 容 的 链接 的 样式 。 


<a class="carousel-control left" href="#myCarousel" 
data-slide="prev">&lsaquo; 

</a> 

<a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo; 

</a> 


在 浏览 器 中 的 预览 效果 如 图 7.21 所 示 。 





站 EN 文革 文件 奖 \H5 教 材 ,H5site\ 轮 斤 html ”CC 搜索 【 


大 Bootst 有 














图 7.21 轮 播 图 片 
完整 代码 如 下 : 


<!IDOCTY?PE html> 
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7.2.2 ”Bootstrap 表单 


HTML 本 身 已 经 提供 了 比较 全 面 的 表单 ， 但 Bootstrap 通过 一 些 简 单 的 HTML 标签 
和 扩展 类 可 创建 出 更 多 不 同样 式 的 表单 。 
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首先 Bootstrap 对 表单 布局 进行 了 扩展 , 提供 了 多 种 类 型 的 表单 布局 :基本 表单 (默认 )、 
内 联 表单 和 水 平 表单 。 


1. 基本 表单 


基本 的 表单 结构 是 Bootstrap 自 带 的 ， 个 别 表单 控件 自动 接收 一 些 全 局 样式 。 在 创建 
基本 表单 时 ， 需 要 向 父 <form> 元 素 添加 role="form"。 把 标签 和 控件 放 在 一 个 带 
有 .form-group 类 的 <div> 中 可 以 获取 最 佳 间 距 , 并 向 所 有 的 文本 元 素 <input>、<textarea> 
和 <select> 添加 class ="form-control" 。 

例 7.11: Bootstrap 基本 表单 

参照 图 7.22， 创 建 相应 表单 。 在 <form> 标 签 中 添加 role="form"， 为 每 个 表单 元 素 添 
加 class="form-control"， 参 考 代 码 如 下 : 








人 口 x 
(DD etn DP - 0 | eootstrap 实 风 加 


7.22 ”Bootstrap 基本 表单 
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2. 内 联 表单 


内 联 表单 是 另 一 种 样式 ， 显 示 更 为 紧凑 ， 在 <form> 标 签 中 添加 .form-inline 类 ， 在 此 
样式 下 元 素 形成 内 联 、 向 左 对 齐 、 并 排 标 签 的 样式 。 修 改 上 一 示例 中 的 <form> 标 签 ， 代 
码 如 下 : 


<form role="form" class="form-inline"> 


在 浏览 器 中 预览 时 ， 如 果 窗 口 宽度 较 大 ， 会 显示 图 7.23 所 示 的 效果 。 如 果 窗 口 宽度 
较 小 ， 表 单元 素 会 向 下 排列 且 左 对 齐 ， 如 图 7.24 所 示 。 





国 Et 文档 文件 夫 \H5 教 材 H' ”| 是 Boctstr | 碟 Boot. x 图 
文人 给 入 


文 提 名称 | 吝 六 和 文 (892 3 口 苛 Xi 六 | 提交 
提示 : 文件 榨 式 必须 为 DOC 或 DOCX. 











图 7.23 内 联 表单 
一 口 x 

司 evxexeH5 寻 万- 图 
文件 名 称 
文件 给 入 

浏览 
提示 : 文件 性 zE 须 为 D0C 或 DOCX。 
口 首次 皖 交 
提交 











图 7.24 缩小 窗口 后 的 内 联 表单 
3. 水 平 表 单 
水 平 表 单 在 创建 时 首先 要 向 父 <form> 元 素 添加 class="form-horizontal"， 把 标签 和 控 


件 放 在 一 个 带 有 class="form-group" 的 <div> 中 ， 并 向 标签 添加 class="control-label"， 显 示 
效果 如 图 7.25 所 示 。 








图 7.25 水 平 表单 
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4. 表单 控件 的 状态 


HTML 提供 了 表单 的 聚焦 状态 ， 也 叫 获 得 焦点 ， 即 用 户 单 击 表单 控件 或 使 用 Tab 键 
聚焦 到 表单 元 素 上 ， 此 时 可 以 看 到 文本 框 内 有 闪 动 的 光标 、 单 选 按 钮 上 有 虚线 的 圆圈 等 
特征 。Bootstrap 针对 表单 控件 扩展 了 新 的 状态 样式 。 
@ ”获得 焦点 在 Bootstrap 中 ， 当 文本 框 获得 焦点 时 ， 文 本 框 的 轮廓 会 被 移 除 ， 同 
时 应 用 box-shadow， 在 原来 边框 处 显示 阴影 效果 。 

@ 禁用 文本 框 Bootstrap 扩展 了 禁用 状态 ， 如 果 需 要 禁用 一 个 控件 ， 需 要 添 
加 disabled 属性 ， 这 不 仅 会 禁用 控件 ， 还 会 改变 文本 框 的 样式 以 及 鼠标 指针 悬 
停 在 元 素 上 时 的 样式 。 





@ ”禁用 字段 集 : <fieldsef> 标 签 类 似 于 容器 , 对 <fieldsef> 添 加 disabled 属性 来 禁用 
<fieldset> 内 的 所 有 控件 。 





@ 验证 状态 : Bootstrap 包含 了 错误 、 警 告 和 成 功 消息 的 验证 样式 。 只 需要 对 父 
元 素 简单 地 添加 适当 的 类 (.has-warming、.has-error 或 .has-success) 即 可 使 用 验 
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上 面 代码 的 预览 效果 如 图 7.26 所 示 。 
(OO en 0 0 © 














荣 用 选择 某 单 。。 荣 上 和 泽 习 
om |] 
wn | 





图 7.26 表单 验证 状态 
5. 表单 控件 的 大 小 


在 Bootstrap 中 还 可 以 对 表单 控件 的 大 小 进行 设置 ， 通 过 使 用 .input-lg 和 .col-lg-* 类 
来 设置 表单 的 高 度 和 宽度 。 设 置 文本 框 的 高 度 时 ， 需 要 设置 class="form-control input-lg"， 
下 拉 菜 单 也 可 以 使 用 。 





如 果 要 设置 文本 框 的 宽度 ， 则 需要 设置 <div> 标 签 ， 代 码 如 下 : 





以 上 代码 的 显示 效果 如 


司 | ENH5site\5.22-5html 
大 bootstrap 表 单 实 例 
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图 7.27 所 示 。 








6. Bootstrap 按钮 


图 7.27 表单 大 小 效果 





Bootstrap 对 按钮 提供 了 更 多 样式 选择 ， 按 钮 的 默认 外 观 为 圆 角 灰色 按钮 ， 任 何 带 
有 .btn 类 的 元 素 都 会 继承 默认 外 观 。Bootstrap 提供 了 一 些 选 项 来 定义 按钮 的 样式 ， 具 体 
如 表 7.4 所 示 ， 这 些 样 式 同样 可 以 用 在 <a>、<button> 或 <input> 元 素 上 。 























表 7.4 按钮 类 

类 名 描述 
bn 为 按钮 添加 基本 样式 
.btn-default 默认 /标准 按钮 
btn-primary 原始 按钮 样式 (未 被 操作 ) 
.btn-success 表示 成 功 的 动作 
-btn-info 该 样式 可 用 于 要 弹出 信息 的 按钮 
-btn-warming 表示 需要 谨慎 操 作 的 按钮 
.btn-danger 表示 危险 动作 的 按钮 操作 
-btn-link 让 按钮 看 起 来 像 链 接 ( 仍 然 保留 按钮 行为 ) 
.btn-lg 制作 大 按钮 
-btn-sm 制作 小 按钮 
btn-xs 制作 超 小 按钮 
-btn-block 块 级 按钮 ( 拉 伸 至 父 元 素 100% 的 宽度 ) 
.active 按钮 被 单 击 
-disabled 禁用 按钮 

















在 class 属性 中 设置 按钮 的 相应 样式 ， 显 示 效 果 如 图 7.27 所 示 。 


<button type="button" class="btn btn-default"> 默 认 按 钮 </button> 
<button type="button" class="btn btn-primary"> 原 始 按钮 </button> 
<button type="button" class="btn btn-success"> 成 功 按钮 </button> 
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除 可 以 设置 按钮 的 样式 外 , 还 可 以 设置 按钮 的 大 小 ，.btn-lg 会 将 按钮 变 大 些 , .bn-sm 
会 让 按钮 变 小 些 ，.btn-xs 会 让 按钮 再 小 一 号 ，.btn-block 则 会 创建 一 个 块 级 按钮 一 一 横 跨 
父 元 素 的 全 部 宽度 ， 如 图 7.28 所 示 。 

Bootstrap 提供 了 用 于 激活 、 禁 用 等 按钮 状态 的 类 。 激 活 状态 的 按钮 呈现 为 被 按压 的 
外 观 ( 深 色 背景 、 深 色 边 框 、 阴 影 )。 禁 用 状态 的 按钮 颜色 会 变 淡 50%， 并 失去 渐变 。 如 
7.28 所 示 ， 代 码 如 下 : 


以 上 对 按钮 样式 的 设置 可 以 用 在 链接 元 素 <a> 上 ， 这 会 形成 按钮 样式 的 链接 ,设置 方 
式 如 下 : 





gi - 0O x 
(OI Enssites22-6ntm ”|| 搜索- P -| 从 交 忆 图 
熏 Bootstrap 才 单 实例 大 Bootstrap 表 单 实例 x 图 

按钮 样式 

xn EO ET EE EI EE … 
按钮 大 小 

大 按钮 

默认 大 小 的 按钮 
ETD 

块 级 的 按钮 

按钮 状态 

ee 

链接 禁用 链接 











7.28 Bootstrap 的 各 式 按钮 


完整 代码 如 下 : 
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除了 可 以 在 元 素 <a>、<button> 上 使 用 按钮 类 以 外 ， 对 <input> 元 素 也 可 以 使 用 ， 但 浏 
览 器 的 处 理 或 泻 染 可 能 会 导致 比较 大 的 差别 ， 因 此 建议 将 按钮 类 只 用 在 <button> 元 素 上 ， 
从 而 使 页 面 的 兼容 性 更 好 。 


7.3 ”Bootstrap 布局 组 件 


Bootstrap 提供 了 功能 强大 的 用 于 页 面 布局 的 组 件 ， 通 过 这 些 组 件 可 以 实现 良好 的 交 
互 功 能 ， 常 用 的 组 件 有 Bootstrap 菜单 、 按 钮 组 、 导 航 元 素 和 导航 栏 等 。 对 这 些 基 本 组 件 
进行 组 合 后 ， 可 以 设计 制作 出 专业 的 导航 条 或 具有 其 他 交互 功能 的 局 部 功能 区 。 


7.3.1 Bootstrap 菜单 


Bootstrap 的 下 拉 菜单 在 更 多 情况 下 会 与 按钮 或 导航 菜单 等 一 起 使 用 ， 组 成 交互 更 为 
方便 的 组 件 。 下 拉 菜 单 本 身 依 赖 链接 或 按钮 ， 因 此 在 创建 下 拉 菜单 前 ， 需 要 创建 链接 或 
按钮 ， 在 其 属性 中 添加 data-toggle="dropdown"， 并 在 其 后 添加 无 序列 表 作 为 下 拉 菜 单 的 
菜单 项 。 

例 7.12: 在 Dreamweaver 中 创建 下 拉 菜单 

(1) 首先 在 Bootstrap 的 class.container 中 创建 一 对 <div> 标 签 ， 并 将 其 class 设置 为 
dropdown， 如 图 7.29 所 示 。 也 可 以 在 代码 窗口 中 直接 输入 以 下 代码 : 
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DW 文 #(R。 需 ( 二 二 (V 括 X( 修 改 (V) 格 RIO) 全 人 (Q。 关 (5) 宇 D(W 和 和 (HH 图 和 名 1 -lol x 
本 y 
| 罗 加 名 启 | 轩辕 国外 -和 国内 加 由- -| 加- 加 
S31-1html x 
OE beotstrop. rir ess jeuery. nin js bootstrap.nin js ee 
1 二 用 吧 4 克 。 标本 peoertrrTH5 和 实况 。| 
可 <acripe src= 人 民 
E33 "bootstrap/js/jquery.min.js"> 
全 三 | </script> 
本 es 
革 | yd 

</scrip 
| </head> 
| 1 -> 
bo <div class="container"> 
二 <div class="dropdown"| 
| </div> 
| </div> 
同 </body> 

</html> 
< > 
Cbodyy Cdiv. oontainer) div. drovdown5| NA 十 io v| 回国 403 x 333v 351K7A8 秒 Unicode (WTF-8) 
ES pe E 
《7 jm | 格式 人) 元 v| 类 [aropdom -| BZ 丘 生 组 要 本 (0) 
bcss ID 巨 |] 蚀 接 中 eeD 时 @ 

-1 

















7.29 添加 菜单 <div> 


(2) 在 刚 创建 的 <div> 中 添加 一 个 按钮 (或 链接 ， 注 意 这 里 的 按钮 使 用 <button> 标 签 )， 
并 在 按钮 中 添加 和 设置 属性 ， 具 体 代码 如 下 : 


(3) 在 “校园 新 闻 ” 后 添加 一 对 <span> 标 签 ， 并 将 其 class 设置 为 caret， 在 其 后 形成 
一 个 三 角 图 标 ， 如 图 7.30 所 示 。 






































(G) 时 | 司 EN 文革 文 作 夫 WH5 教 村 H: ”| | 搜索 - p- 
居 Bootstrap 下 拉 荣 单 实例 。 x | 
校园 新 闻 ~ 








7.30 ”完成 后 按钮 的 效果 


(4) 在 刚才 创建 的 链接 的 后 面 制作 无 序列 表 ， 并 将 每 一 项 都 设置 为 空 链接 ， 如 图 7.31 
所 示 。 
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文昌 ”连日 ， 吉 看 (W。 插入 () 修改 (M) 检 RIO) 命 S(O。 基 S(9 齐 D(W 和 mW(H 。 国 ” 立 ” 名 











15> 
<a href="#"> 学 校 简介 </a></11> 


<11> 
<a href="#"> 班 级 新 闻 </a></1i> 
<11> 
<a href="#"> 通 知 通告 </a></11> 
<1i> 
<a href="#"> 校 园 文 化 </a></1i> 
<11> 
<a href="#"> 法 规 校 纪 </a></1i> 











图 7.31 为 下 拉 菜单 列表 添加 内 容 
(5) 为 <ul> 标 签 添加 和 设置 属性 ， 有 共 体 代码 如 下 : 


预览 效果 如 图 7.32 所 示 。 

















(© 写 】| 国 EN 文 村 文件 夫 \H5 教 村 H: ”| | 搜索 Dp- 
大 Bootstrap 下 拉 荣 间 实 例 。 x |[ 
校园 新 闻 ~ 


学 校 简介 
班级 新 闻 
通知 通告 
校园 文化 
法 规 校 纪 




















图 7.32 完成 后 的 效果 


(6) 通过 添加 分 割 线 对 菜单 项 进行 分 类 ， 分 割 线 本 身 也 是 空 的 <li> 列 表 项 ， 但 需要 添 
加 class="divider"， 代 码 如 下 : 


分 割 后 的 预览 效果 如 图 7.33 所 示 。 
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图 7.33 添加 分 割 线 后 的 效果 
还 可 以 根据 分 类 为 下 拉 菜单 中 的 菜单 项 添加 标题 ， 标 题 也 是 空 的 <li> 列 表 项 , 在 其 中 
添加 属性 class="dropdown-header": 


idlass="dropdownheader 菜 夺 是 > 
7.3.2 ”Bootstrap 按钮 组 

Bootstrap 针对 按钮 的 扩展 提供 了 更 多 交互 设计 元 素 ， 对 多 个 按钮 进行 组 合 ， 形 成 按 
钮 组 ， 达 成 按照 类 型 分 配 实现 功能 划分 的 目标 。 

1. 基本 按钮 组 

按钮 组 最 为 常用 的 是 基本 按钮 组 ， 创 建 基本 按钮 组 时 ， 将 需要 分 类 包含 的 按钮 包含 
在 一 对 <div> 中 ， 将 class 设置 为 btn-group。 

例 7.13: 通过 按钮 组 模仿 导航 条 

参照 以 下 代码 实现 按钮 组 ， 预 览 效 果 如 图 7.34 所 示 。 
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富 )| 园 EN 本文 fH5 孝 村 H5site532-1htm - 节 








上 E 三 尖 


介 交 间 @ 











生 Bootstrap 按 乌 组 实例 





x 加 


Bootstrap” 5 [bd 
| 首页 术 罗 Ni 闻 校风 RO 更 名 相遇 。 个 性 民 示 久 言 ， 用 启示 


7.34 用 按钮 组 模仿 导航 条 


2. 设置 按钮 组 大 小 





“1S 


按钮 组 可 以 设置 大 小 , 在 btn-group 后 添加 btn-group-lg 为 大 按钮 , 添加 btn-group-sm 


为 小 按钮 ， 添 加 btm-group-xs 为 特 小 按钮 ， 代 码 如 下 ， 预 览 效果 如 图 7.35 所 示 。 





























| 首页 BE ba 到 相 册 | 个 性 居 示 | 二 言 用 广 登 录 


一 口 x 
© 司 EN 文档 文件 顽 \H5 教 材 H5site\5.3.2-2.htm -| | 搜索 DP-| 介 六 章 国 
Bootstrap 下 过 芝 音 网 ”| 总 Bootstrap 近 吉安 全 xx 








7.35 不同 大 小 的 按钮 组 


3. 垂直 按钮 组 


默认 状态 下 ， 按 钮 组 水 平 排列 ， 如 果 需 要 设置 为 垂直 排列 ， 可 以 在 所 有 按钮 组 的 外 部 
添加 一 对 <div>， 并 将 class 设置 为 bm-group-vertical， 代 码 如 下 ， 预 览 效果 如 图 7.36 所 示 。 
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| vezhanhH: - 0 | | 次 雪 - 








图 7.36 垂直 按钮 组 
4. 按钮 组 的 榜 套 


按钮 组 可 以 进行 嵌 套 ， 即 在 一 个 btn-group 内 和 嵌 套 另 一 个 bn-group。 多 数 情况 下 ,可 
以 利用 这 种 嵌 套 方式 将 下 拉 菜 单 嵌 套 到 某 个 按钮 中 ， 基 本 样式 的 具体 示例 (参见 图 7.33) 
在 前 面 的 章节 中 已 经 介绍 过 。 

在 基本 嵌 套 样式 的 基础 上 ， 可 以 创建 带 分 割 效果 的 按钮 下 拉 菜单 。 在 基本 样式 中 ， 
按钮 与 下 拉 菜 单 在 一 起 ， 当 单 击 按钮 时 ， 下 拉 菜 单 会 弹出 。 在 分 割 效 果 的 按钮 下 拉 菜 单 
中 ， 按 钮 与 菜单 分 离 ， 单 击 按钮 时 ， 下 拉 菜 单 并 不 弹出 ， 单 击 右 侧 的 三 角 按钮 ， 菜 单 才 
会 弹出 ， 如 图 7.37 所 示 。 

分 离 按 钮 的 创建 ， 实 际 上 是 在 按钮 旁边 再 创建 一 个 特殊 的 按钮 ， 按 钮 上 面 不 显示 文 
字 ， 只 添加 显示 的 三 角 按钮 和 提示 信息 ， 代 码 如 下 : 











em EE: PD- 








Bootstrap 按 明生 Bootstrap 下 拉 .. 关 8ootstrap.，x | 感 Bootstrap 下 | 
校园 新 闻 > 。 校园 新 闻 | 

















图 7.37 分 割 效 果 的 按钮 下 拉 菜单 
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默认 状态 下 ， 下 拉 菜 单 是 向 下 弹出 ， 如 果 按 钮 在 窗口 的 底部 ， 此 时 可 以 设置 为 向 上 
弹出 菜单 ， 如 图 7.38 所 示 。 首 先 将 按钮 和 弹出 菜单 放置 在 一 个 位 于 底部 的 <div> 中 ， 然 后 
将 按钮 所 在 <div> 中 的 class 设置 为 "btn-group dropup"， 其 中 dropup 就 是 设置 菜单 向 上 弹 
出 的 选项 。 











| | 图 EN 文档 文件 夫 \H5 教 村 H: ”| | 搜索 -. 只 - 
i 
校园 新 闻 - 。 校园 新 闻 ~ 














学 校 简介 








图 7.38 向 上 弹出 菜单 
7.3.3 ”Bootstrap 导航 


导航 条 是 网 页 中 非常 常见 和 重要 的 交互 元 素 ，Bootstrap 提供 了 多 种 不 同样 式 的 导航 
条 。 这 些 导航 条 使 用 相同 的 标记 和 基 类 .nav。Bootstrap 还 提供 了 一 个 用 于 共享 标记 和 状态 
的 帮助 器 类 。 改 变 修饰 的 类 ， 可 以 在 不 同 的 样式 间 进行 切换 。 

Bootstrap 导航 的 设置 首先 需要 依赖 无 序列 表 ， 因 此 在 创建 导航 的 时 候 ， 要 先 将 导航 
条 中 的 导航 项 目 做 好 ， 然 后 在 <ul> 标 签 中 添加 class="nav nav-tabs"。 


1. 导航 菜单 


例 7.14: 创建 标签 式 导航 菜单 

(1) 创建 无 序列 表 。 在 Dreamweaver 中 创建 无 序列 表 ， 列 表 内 容 参 照 图 7.39， 并 将 每 
一 项 设置 为 超 链 接 ( 空 链 接 即 可 )。 

(2) 将 光标 放置 在 代码 窗口 中 的 <ul> 标 签 上 ， 将 <ul> 标 签 设 置 为 <ul class="nav 
nav-tabs">， 在 “首页 ”的 <li> 标 签 处 添加 class="active"， 使 其 成 为 默认 处 于 激活 状态 的 
导航 项 ， 如 图 7.40 所 示 。 
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人 侈 图 EN 文档 文件 夫 \H5 教 材 .H5site\5.3.3-1h ~ 


并 Bootstrap 导 航 实例 x| 
校园 风光 班级 相册 个 性 展示 














耻 
中 





图 7.40 制作 标签 式 导航 菜单 


实现 以 上 标签 式 导航 菜单 的 完整 代码 如 下 : 








第 7 章 ”Bootstrap 的 应 用 "219。 





上 面 示例 演示 的 是 标签 式 导 航 ， 样 式 简洁 ，Bootstrap 还 提供 了 其 他 几 种 不 同样 式 的 
导航 菜单 。 只 需要 在 nav 后 面 修改 相应 的 样式 名 称 即 可 ， 具 体 值 可 参照 表 7.5。 


表 7.5 导航 菜单 的 类 型 











导航 菜单 的 名 称 Class 的 值 
基本 标签 式 导航 菜单 nav nav-tabs 
基本 胶 圳 式 导航 菜单 nav nav-pills 
垂直 胶 圳 式 导航 菜单 nav nav-pills nav-stacked 
加 nav nav-pills nav-justified 
两 端 对 齐 的 标签 式 导航 菜单 





以 上 导航 菜单 的 样式 如 图 7.41 所 示 。 





| evi Ha HSsite\5 33-2html _ EE -| 分 容 窜 
乱 BootstrapBW 后 Bootstrap EN x 加 


基本 标签 式 导航 菜单 


首页 校园 新 闻 。 ”校园 风光 ”班级 相册 个 性 展示 钾 言 


基本 胶囊 式 导 航 菜单 
四 校园 新 闻 。 校园 风光 。 班级 相遇。 个 性 展示 。 留言 
两 端 对 齐 的 标签 式 导航 菜单 


首页 校园 新 闻 校园 风光 班 和 相册 个 性 展示 留言 


垂直 的 胶囊 式 导航 菜单 











图 7.41 各 种 导航 菜单 的 效果 


让 标签 式 或 胶 襄 式 导 航 菜单 与 父 元 素 等 宽 。 在 更 小 的 屏幕 (小 于 768px) 上 ， 导 航 链接 
会 堆 生 ， 如 图 7.42 所 示 。 
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四 EECIE 








两 端 对 齐 的 标签 式 导航 菜单 


首页 





图 7.42 窗口 缩小 后 的 效果 
在 使 用 菜单 时 ， 当 把 鼠标 移 到 菜单 项 上 时 ， 该 菜单 项 处 在 激活 状态 ， 也 可 以 通过 对 
菜单 项 设置 class 属性 将 之 作为 默认 项 目 。 在 需要 设置 为 默认 项 目的 列表 项 标签 <i> 中 设 
置 class="active"。 同 样 ， 如 果 需 要 禁用 某 个 菜单 项 ， 可 以 将 其 class 属性 设置 为 disabled， 
这 样 就 会 创建 一 个 灰色 的 链接 ， 同 时 禁用 该 链接 的 :hover 状态 。 参 考 代 码 如 下 : 


2. 导航 栏 


Bootstrap 导航 栏 是 非常 具有 特色 的 一 项 功能 ， 能 够 在 网 页 的 最 上 部 或 最 下 部 实现 响 
应 式 导 航 ， 以 适应 不 同 大 小 的 显示 窗口 ， 从 而 使 得 页 面 能 够 适应 不 同 的 显示 设备 。 导 航 
栏 在 移动 设备 的 视图 中 是 折 姜 的 ， 随 着 可 用 视 口 宽度 的 增加 ， 导 航 栏 也 会 水 平展 开 。 在 
Bootstrap 导航 栏 的 核心 ， 导 航 栏 包括 站 点 名 称 和 基本 的 导航 定义 样式 。 默 认 的 导航 栏 以 
灰色 的 背景 区 域 配合 深 灰 色 字 体 进行 设计 ， 整 个 导航 栏 的 内 容 都 放 在 <nav> 标 签 中 ， 这 个 
标签 是 HTMLS5 新 增 的 标签 。 

例 7.15: 默认 导航 栏 的 制作 

(1) 在 class 属性 为 container 的 <div> 中 添加 <nav> 标 签 ， 并 在 其 中 添加 Bootstrap 的 
navbar、navbar-default 类 ， 如 图 7.43 所 示 ， 代 码 如 下 : 
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其 中 role="navigation"， 有 助 于 增强 可 访问 性 。 
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7.43 ”添加 导航 栏 标 记 


(2) 添加 一 个 <div> 作 为 网 站 的 标题 ， 将 class 属性 设置 为 navbar-header。 在 该 <div> 
内 部 包含 class 属性 为 navbar-brand 的 <a> 元 素 ， 作 为 标题 的 文字 将 会 比 导航 栏 中 其 他 的 


文字 大 一 些 


为 了 向 导航 栏 添加 链接 ， 只 需要 简单 地 添加 带 有 .nav、.navbar-nav 类 的 无 序列 表 即 


可 。 在 其 上 面 的 元 素 中 添加 role="navigation"， 有 助 于 增强 可 访问 性 。 


G3) 在 刚才 添加 的 <div> 后 添加 导航 项 目 ， 并 将 它们 转换 为 无 序列 表 ， 将 每 项 做 成 超 


链接 ( 空 链 接 即 可 )， 如 图 7.44 所 示 。 
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图 7.44 在 导航 栏 中 添加 相应 的 项 目 
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(4) 在 <ul> 标 签 中 添加 class="nav navbar-nav"， 在 “校园 新 闻 ” 的 <li> 中 添加 活动 


项 <li class="active">， 在 Dreamweaver 中 的 效果 如 图 7.45 所 示 ， 代 码 如 下 ， 预 览 效果 
如 图 7.46 所 示 。 





oa> 
/a> 
ya hzet-rgny 术 国 风光 cyay 
> 
<li><n nrere": "> 天 栅 相册 </a> 
aayca heetc4r> 个 性 属 下 cyn 闲 / 


<aayca nzezmr"> 留 言 ([a></12> 
at><a hser="#"> 几 户 家 姑 </a></ 




















05 x 05 YP FE /BW nicvde mral | ， 








(Oe Do | Bocansmm 全 | 


网 络 17 之 家 。 校园 新 闻 。 校园 风光 班级 相册 。 个 性 展示 “留言 。 用 户 登 录 








图 7.46 在 浏览 器 中 的 预览 效果 
例 7.16: 将 导航 栏 改 为 响应 式 导 航 栏 
Bootstrap 导航 栏 提 供 了 响应 功能 ， 能 根据 页 面 大 小 产生 变化 。 当 页 面 处 在 移动 设备 
上 时 ， 导 航 栏 中 的 项 目 会 压缩 ， 并 在 右 侧 显示 一 个 按钮 ， 单 击 可 以 弹出 导航 栏 中 的 项 目 ， 
如 图 7.47 所 示 。 
(1) 在 网 站 标题 的 <a> 标 签 前 添加 用 于 压缩 后 显示 的 按钮 ， 在 按钮 中 添加 如 下 属性 : 
class 属性 ， 其 值 为 navbar-toggle; data-toggle 属性 ， 其 值 为 collapse， 用 于 告诉 JavaScript 
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需要 对 按钮 做 什么 ，data-target 属性 ， 其 值 为 #example-navbar-collapse， 指 示 要 切换 到 哪 
一 个 元 素 。 

(2) 在 按钮 中 添加 四 对 <span> 标 签 ， 其 中 带 有 class="icon-bar" 的 三 对 <span> 标 签 用 于 
创建 所 谓 的 汉堡 按钮 。 

具体 代码 如 下 : 





一 口 x 
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网 络 17 之 家 
校园 新 闻 
校园 风光 
班级 相册 
个 性 展示 
塘 言 


用 户 登录 








7.47 ”响应 式 导航 栏 


导航 栏 中 的 每 一 项 都 可 以 添加 下 拉 菜 单 ， 要 添加 下 拉 菜 单 的 导航 项 中 添加 下 拉 菜 单 的 
属性 ， 然 后 添加 下 拉 菜 单 中 的 项 目 即 可 。 下 面 通过 示例 演示 如 何 为 导航 栏 添加 下 拉 菜 单 。 

例 7.17: 在 导航 栏 中 添加 下 拉 菜 单 

(1) 在 “校园 新 闻 ” 的 <a> 标 签 添加 属性 class="dropdown-toggle" 和 data-toggle= 
"dropdown"， 用 于 产生 下 拉 菜 单 。 

(2) 在 <a> 标 签 内 部 , 在 “校园 新 闻 ” 的 后 面 添加 <b class="caret"></b>， 形成 三 角 图 标 。 

G3) 在 </a> 标 签 后 添加 下 拉 菜单 项 ， 并 将 其 设置 为 无 序列 表 ， 将 每 一 项 设置 为 超 链接 
( 空 链接 即 可 )。 

具体 代码 如 下 ， 注 意 标签 的 嵌 套 关系 : 
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7.48 所 示 为 浏览 窗口 较 大 时 的 预览 效果 。 图 7.49 所 示 为 浏览 窗口 较 小 时 的 预览 效果 。 
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7.48 带 下 拉 菜 单 的 导航 栏 
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7.49 带 下拉 菜 单 的 导航 栏 在 小 窗口 中 的 预览 效果 


在 导航 栏 中 不 仅 可 以 添加 下 拉 菜 单 ， 还 可 以 添加 表单 、 文 字 链 接 等 元 素 ， 使 导航 栏 
的 风格 更 加 多 样 化 。 

例 7.18: 添加 搜索 表单 和 带 图 标的 文字 链接 

(1) 在 导航 栏 的 </ul> 标 签 后 添加 一 对 <div> 标 签 , 在 其 中 添加 <form> 表 单 ,代码 如 下 : 
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这 里 的 表单 不 使 用 Bootstrap 表单 默认 的 类 ， 而 是 使 用 navbar-form 类 。 这 确保 表单 
能 够 适当 地 垂直 对 齐 以 及 在 较 窜 的 视 口中 折合 。 

(2) 删除 原 导 航 栏 中 的 “用 户 登 录 ” 并 在 表单 所 在 </div> 标 签 的 后 面 添 加 一 对 新 的 
<div> 标 签 ， 添 加 如 下 代码 : 





导航 中 的 文本 字符 串 使 用 class="navbar-text"。 在 “注册 ”和 “登录 ”两 者 之 前 添加 
<span> 标 签 , 通过 glyphicon glyphicon-* 为 文字 添加 图 标 。 注意 在 </span> 标 签 与 文字 之 间 
加 一 个 空格 , 否则 图 标 将 与 文字 发 生 部 分 重 琶 .在 浏览 器 中 的 预览 效果 如 图 7.50 和 图 7.51 
所 示 。 
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图 7.50 添加 表单 、 按 钮 和 文本 后 的 导航 栏 
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图 7.51 在 小 窗口 中 的 显示 效果 


Bootstrap 导航 栏 在 默认 状态 下 会 随 着 页 面向 上 滚动 ， 也 可 以 通过 设置 ， 使 其 固定 在 
窗口 的 顶部 或 底部 ， 当 页 面 内 容 向 上 或 向 下 滚动 时 ， 导 航 栏 不 随 之 滚动 。 

为 了 让 导航 栏 固 定 在 页 面 的 顶部 , 需要 在 navbar 的 class 属性 中 添加 navbar-fixed-top。 
如 果 需 要 将 导航 栏 固定 在 浏览 器 窗口 的 底部 , 则 需要 添加 navbar-fixed-bottom。 代码 如 下 : 
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为 了 防止 导航 栏 与 页 面 中 其 他 内 容 的 项 部 发 生 交错 ， 需 要 向 <body> 标 签 添 加 至 少 50 
像素 的 内 边 距 (padding)， 内 边 距 的 值 可 以 根据 需要 进行 设置 。 
如 果 想 创建 能 随 着 页 面 一 起 滚动 的 导航 栏 ， 需 要 添加 navbar-static-top。 


3. 面包 悄 导 航 


面包 导 导 航 (Breadcrumbs) 是 一 种 基于 网 站 层次 信息 的 显示 方式 ， 用 于 向 用 户 提示 当 
前 访问 的 页 面 在 导航 层次 结构 中 的 位 置信 息 。Bootstrap 中 的 面包 悄 导 航 是 一 个 简单 的 带 
有 breadcrumb 类 的 列表 。 

例 7.19: 在 页 面 上 添加 面包 居 导 航 

(1) 在 </nav> 标 签 后 添加 一 对 <div> 标 签 ， 并 在 其 中 添加 面包 届 导 航 的 列表 内 容 “ 校 
园 新 闻 ” 和 “学 校 简介 ”， 将 其 制作 成 无 序列 表 ， 并 设置 为 超 链接 ， 代 码 如 下 : 





(2) 为 <ul> 标 签 添加 class="breadcrumb"， 为 “学 校 简介 ”添加 活动 项 ， 代 码 如 下 : 











预览 效果 如 图 7.52 所 示 。 
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7.52 面包 届 导 航 


7.4 ”BootStrap 综合 案例 


企业 网 站 用 于 展示 企业 形象 ， 通 过 首页 集中 展示 企业 元 素 ， 通 过 其 他 页 面 详细 介绍 
企业 信息 。 本 节 将 通过 一 个 基于 Bootstrap 的 企业 网 站 首页 的 设计 与 制作 过 程 ， 综 合 讲解 
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Bootstrap 的 主要 应 用 ， 该 企业 网 站 首页 制作 完成 的 效果 如 图 7.53 所 示 。 
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1. 站 点 的 规划 


图 7.53 ”最 终 效果 图 


由 于 是 基于 Bootstrap， 因 此 在 制作 网 页 时 需要 首先 添加 Bootstrap 的 相关 文件 ， 具 体 
目录 结构 如 图 7.54 所 示 。js、css 和 fonts 为 Bootstrap 的 默认 文件 夹 ， 创 建 的 images 文件 











夹 用 于 存放 页 面 中 所 用 的 图 片 。 








名 称 

则 css 

凰 fonts 

a images 
js 

@ indexhtml 


图 7.54 





修改 日 期 关 型 大 小 
2018/2/23 12:46 文 
2016/7/25 15:53 文 
2018/2/23 12:52 文 
2018/2/5 21:43 文 
2018/2/23 13:43 Chrome HTMLD 6KB 





站 点 文件 夹 结 构 
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完整 的 企业 网 站 ， 需 要 包含 首页 、 企 业 相 关 产 品 和 服务 页 面 以 及 资讯 页 面 。 

首页 : index.html 

服务 页 面 : service html 

资讯 页 面 : info .html 

关于 页 面 : abouthtml 

登录 页 面 : login.html 

2. 页 面 设计 

网 站 的 页 面 设计 以 Bootstrap 的 基本 样式 为 主 ， 不 要 引入 过 多 的 自 定义 样式 ， 以 充分 
体现 Bootstrap 原 有 的 设计 风格 。 当 然 用 户 也 可 以 根据 需要 , 在 Bootstrap 原 有 的 风格 上 镭 
加 自己 的 设计 或 者 直接 覆盖 原生 设计 。 本 节 主 要 通过 依靠 Bootstrap 提供 的 各 种 元 素来 设 
计 和 实现 网 站 首页 。 

网 站 首页 分 为 几 个 区 域 ， 整 体 采用 目前 较为 流行 的 多 行 水 平 布局 方式 进行 结构 的 设 
计 ， 如 图 7.55 所 示 。 
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图 7.55 网 站 首页 版 式 结构 图 
3. 首页 的 制作 
(1) 整体 框架 
首先 在 页 面 中 导入 所 需 的 Bootstrap 相关 文件 ， 包 含 JavaScript 文件 和 CSS 文件 ， 添 
加 到 <head> 标 签 中 ， 代 码 如 下 : 





<head> 
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上 面 用 到 的 style.css 文件 为 自 定义 CSS 样式 文件 ， 用 于 存储 自 定义 样式 ， 需 要 自行 
创建 。 此 处 可 以 先 创建 一 个 空 文件 ， 后 面 再 逐步 添加 其 中 的 内 容 。 


(2) 导航 栏 
导航 栏 的 制作 可 以 参照 前 面 章节 中 的 示例 来 完成 ， 代 码 如 下 : 
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(3) 轮 播 图 
轮 播 图 用 于 展示 企业 特色 ， 可 以 添加 多 幅 图 片 ， 此 处 只 用 了 三 幅 。 如 果 需 要 添加 更 
多 图 片 ， 在 相应 位 置 添加 即 可 ， 代 码 如 下 : 
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完成 以 上 代码 后 ， 轮 播 图 片 显示 为 原 图 的 大 小 ， 为 了 统一 图 片 大 小 ， 在 style.css 文 
件 中 添加 自 定义 样式 。 


(4) 特色 服务 

“特色 服务 ” 栏 通 过 三 个 图 片 链接 提供 快速 访问 相应 服务 的 功能 。“ 特 色 服务 ” 栏 
通过 Bootstrap 的 网 格 系统 将 其 平分 为 三 份 ， 每 一 个 图 片 链接 放 在 一 个 网 格 内 。 为 了 增加 
页 面 元 素 的 变化 效果 ， 将 图 片 的 样式 设置 为 class="img-circle"， 使 其 显示 为 圆 形 。 
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完成 以 上 代码 后 ， 在 自 定义 样式 文件 style.css 中 添加 如 下 样式 设置 ， 设 置 居中 对 齐 、 
上 边 距 以 及 图 片 的 高 度 : 


(5) 教育 资讯 
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(6) 版权 信息 





7.5 本 章 小 结 


本 章 主 要 介绍 了 Bootstrap 的 基本 情况 ， 重 点 讲解 了 Bootstrap 的 网 格 系统 、 文 字 排版 、 
列表 和 表格 等 基本 布局 对 象 的 使 用 方法 ， 结 合 示例 进一步 讲解 了 如 何 使 用 Bootstrap 设置 响 
应 式 图 片 ， 以 及 轮 播 图 的 应 用 。 同 时 还 介绍 了 Bootstrap 在 布局 时 常用 的 菜单 、 按 钮 组 和 导 
航 等 组 件 的 特点 及 使 用 方法 。 最 后 通过 综合 案例 ， 将 以 上 主要 内 容 组 合 ， 实 现 一 个 企业 网 
站 的 首页 。 


7.6 课 后 训练 


1. 仿照 课 内 示例 ， 制 作 完成 自己 的 个 人 简历 页 面 ， 要 求 除 文字 外 ， 添 加 3 或 4 幅 图 
片 以 丰富 页 面 效 果 。 
2. 利用 第 3 章 的 素材 ， 采 用 Bootstrap 完成 例 3.1、 例 3.2 和 例 3.3。 
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